diff --git a/interactive-mining-madoap/madoap/src/madserverv2.py b/interactive-mining-madoap/madoap/src/madserverv2.py
index 042864b..f6603ea 100755
--- a/interactive-mining-madoap/madoap/src/madserverv2.py
+++ b/interactive-mining-madoap/madoap/src/madserverv2.py
@@ -113,6 +113,41 @@ def numberOfDocsUploaded(user_id):
             return num_lines
     return 0
 
+def loadProfile(profileLocation, user_id):
+    # extract data from profile file
+    import sys
+    sys.path.append(msettings.MADIS_PATH)
+    import madis
+    # get the profile database cursor
+    cursor=madis.functions.Connection(profileLocation).cursor()
+
+    # data to be sent
+    data = {}
+    # Write to csv file the grants ids
+    if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='grants'")]):
+        cursor.execute("output '/tmp/p{0}.tsv' select c1,c2 from grants".format(user_id))
+        # Get the number of grants uploaded
+        file_name = "/tmp/p%s.tsv" % (user_id)
+        if os.path.isfile(file_name):
+            numberOfGrants = sum(1 for line in open(file_name))
+        data['grants'] = numberOfGrants
+    # write to json the poswords
+    if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='poswords'")]):
+        results = [r for r in cursor.execute("select c1, c2 from poswords")]
+        data['poswords'] = {value:key for value, key in results}
+    # write to json the negwords
+    if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='negwords'")]):
+        results = [r for r in cursor.execute("select c1, c2 from negwords")]
+        data['negwords'] = {value:key for value, key in results}
+    # write to json the filters
+    if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='filters'")]):
+        results = [r for r in cursor.execute("select c1, c2 from filters")]
+        for value, key in results:
+            data[value] = key
+        # data['filters'] = {value:key for value, key in results}
+    cursor.close()
+    return data
+
 def deleteAllUserFiles(user_id):
     if user_id:
         file_name = "/tmp/p%s.tsv" % (user_id)
@@ -122,6 +157,22 @@ def deleteAllUserFiles(user_id):
         if os.path.isfile(file_name):
             os.remove(file_name)
 
+def loadExampleDocs(user_id):
+    sample_file = open("static/exampleDocs.txt", 'r')
+    # write data to physical file
+    cname = "/tmp/docs{0}.json".format(user_id)
+    fh = open(cname, 'w')
+    while 1:
+        copy_buffer = sample_file.read(1048576)
+        if not copy_buffer:
+            break
+        fh.write(copy_buffer)
+    fh.close()
+    lines_num = sum(1 for line in open(cname))
+
+def loadExampleProfile(user_id):
+    return loadProfile("static/exampleProfile.oamp", user_id)
+
 
 class BaseHandler(ozhandler.DjangoErrorMixin, ozhandler.BasicAuthMixin, tornado.web.RequestHandler):
     def __init__(self, *args):
@@ -322,6 +373,8 @@ class createUploadProfileHandler(BaseHandler):
         try:
             user_id = self.get_secure_cookie('madgikmining')
             if user_id is None:
+                self.set_status(400)
+                self.write("Missing cookie containing user's id...")
                 return
             if 'upload' in self.request.files:
                 # get file info and body from post data
@@ -337,39 +390,23 @@ class createUploadProfileHandler(BaseHandler):
                 fh = open(cname, 'w')
                 fh.write(fileinfo['body'])
                 fh.close()
-                # extract data from profile file
-                import sys
-                sys.path.append(msettings.MADIS_PATH)
-                import madis
-                # get the profile database cursor
-                cursor=madis.functions.Connection(cname).cursor()
-
-                # data to be sent
-                data = {}
-                # Write to csv file the grants ids
-                if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='grants'")]):
-                    cursor.execute("output '/tmp/p{0}.csv' select * from grants".format(user_id))
-                    numberOfGrants = numberOfGrantsUploaded(user_id, "puppet_value")
-                    self.set_secure_cookie('madgikmining_grantsuploaded', str(numberOfGrants))
-                    data['grants'] = numberOfGrants
-                # write to json the poswords
-                if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='poswords'")]):
-                    results = [r for r in cursor.execute("select c1, c2 from poswords")]
-                    data['poswords'] = {value:key for value, key in results}
-                # write to json the negwords
-                if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='negwords'")]):
-                    results = [r for r in cursor.execute("select c1, c2 from negwords")]
-                    data['negwords'] = {value:key for value, key in results}
-                # write to json the filters
-                if len([r for r in cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='filters'")]):
-                    results = [r for r in cursor.execute("select c1, c2 from filters")]
-                    data['filters'] = {value:key for value, key in results}
-                cursor.close()
+                data = loadProfile(cname, user_id)
+                self.set_secure_cookie('madgikmining_grantsuploaded', str(data['grants']))
+                self.write(json.dumps(data))
+                self.finish()
+            elif 'example' in self.request.arguments:
+                # reset everything
+                deleteAllUserFiles(user_id)
+                # load example data
+                loadExampleDocs(user_id)
+                data = loadExampleProfile(user_id)
+                self.set_secure_cookie('madgikmining_grantsuploaded', str(data['grants']))
                 self.write(json.dumps(data))
                 self.finish()
 
         except Exception as ints:
-            self.write(json.dumps({'respond': "<b style=\"color: red\">Something went very wrong!</b>"}))
+            self.set_status(400)
+            self.write("Something is wrong with this profile file...")
             print ints
             return
 
@@ -389,12 +426,15 @@ class uploadCodesHandler(BaseHandler):
             # reset everything
             deleteAllUserFiles(user_id)
         # check if he already uploaded his grants ids and inform him via a message
-        self.render('upload_codes.html', settings=msettings)
+        numOfGrants = numberOfGrantsUploaded(user_id, self.get_secure_cookie('madgikmining_grantsuploaded'))
+        self.render('upload_codes.html', settings=msettings, numOfGrants=numOfGrants)
     def post(self):
         try:
             # get user id from cookie. Must have
             user_id = self.get_secure_cookie('madgikmining')
             if user_id is None:
+                self.set_status(400)
+                self.write("Missing cookie containing user's id...")
                 return
             # service to upload a tsv file with the codes. Returns the codes
             if 'upload' in self.request.files:
@@ -404,7 +444,8 @@ class uploadCodesHandler(BaseHandler):
                 extn = os.path.splitext(fname)[1]
                 # must be .pdf or .json
                 if extn != ".tsv" and extn != ".txt":
-                    self.write(json.dumps({'respond': "<b style=\"color: red\">File must be .tsv or .txt</b>"}))
+                    self.set_status(400)
+                    self.write("File must be .tsv or .txt...")
                     return
                 codes = {}
                 lines = fileinfo['body'].splitlines()
@@ -440,7 +481,9 @@ class uploadCodesHandler(BaseHandler):
                 # data to be sent
                 data = {}
                 if len(concepts) == 0:
-                    data['error'] = "You have to provide at least one concept to continue"
+                    self.set_status(400)
+                    self.write("You have to provide at least one concept to continue!")
+                    return
                 else:
                     data['respond'] = "<b>{0} Codes</b> loaded successfully!".format(len(concepts))
                     self.set_secure_cookie('madgikmining_grantsuploaded', str(len(concepts)))
@@ -470,9 +513,8 @@ class uploadCodesHandler(BaseHandler):
                 self.finish()
 
         except Exception as ints:
-            data = {}
-            data['error'] = "<b style=\"color: red\">File Failed to Upload!</b>"
-            self.write(json.dumps(data))
+            self.set_status(400)
+            self.write("A server error occurred, please contact administrator!")
             self.finish()
             print ints
             return
@@ -491,7 +533,7 @@ class configureProfileHandler(BaseHandler):
                 return
             # check if he uploaded his codes
             if numberOfGrantsUploaded(user_id, self.get_secure_cookie('madgikmining_grantsuploaded')):
-                self.render('configure_profile.html', settings=msettings)
+                self.render('configure_profile2.html', settings=msettings)
             else:
                 self.redirect('/upload-codes')
     def post(self):
@@ -510,7 +552,9 @@ class configureProfileHandler(BaseHandler):
                 data = {}
                 # must be .pdf, .txt or .json
                 if extn != ".pdf" and extn != ".txt" and extn != ".json":
-                    data['error'] = "<b style=\"color: red\">File must be .pdf, .json or .txt</b>"
+                    self.set_status(400)
+                    self.write("File must be .pdf, .json or .txt")
+                    return
                     return
                 # write data to physical file
                 cname = "/tmp/docs{0}{1}".format(user_id, extn)
@@ -523,14 +567,16 @@ class configureProfileHandler(BaseHandler):
                     p = sub.Popen(['pdftotext', '-enc', 'UTF-8', cname],stdout=sub.PIPE,stderr=sub.PIPE)
                     output, errors = p.communicate()
                     if errors:
-                        data['error'] = "<b style=\"color: red\">Cannot convert .pdf to .txt</b>"
+                        self.set_status(400)
+                        self.write("An error occurred when trying to convert .pdf to .txt...")
                         return
                     os.remove(cname)
                     cname = "/tmp/docs{0}.txt".format(user_id)
                     with open(cname, 'r') as fin:
                         docData=fin.read().replace('\n', ' ')
                         if len(docData)==0:
-                            data['error'] = "<b style=\"color: red\">Cannot convert .pdf to .txt</b>"
+                            self.set_status(400)
+                            self.write("An error occurred when trying to convert .pdf to text...")
                             return
                     with open("/tmp/docs{0}.json".format(user_id), "wb") as fout:
                         json.dump({"text":docData,"id":os.path.splitext(fname)[0]}, fout)
@@ -543,13 +589,16 @@ class configureProfileHandler(BaseHandler):
                             jsonlist.append(json.loads(line))
                         os.rename(cname, "/tmp/docs{0}.json".format(user_id))
                     except ValueError, e:
-                        data['error'] = "<b style=\"color: red\">File is not in a valid json format</b>"
+                        self.set_status(400)
+                        self.write("File is not in a valid json format...")
                         os.remove(cname)
                         print e
                         return
                 file_name = "/tmp/docs%s.json" % (user_id)
                 if os.path.isfile(file_name):
-                    data['data'] = sum(1 for line in open(file_name))
+                    lines = sum(1 for line in open(file_name))
+                    data['respond'] = "<b>{0} Documents</b> loaded successfully!".format(lines)
+                    data['data'] = lines
                 self.write(json.dumps(data))
                 self.finish()
             # post case where the user selects form preset documents samples
@@ -578,8 +627,11 @@ class configureProfileHandler(BaseHandler):
                 # data to be sent
                 data = {}
                 if lines_num == 0:
-                    data['error'] = "You have to provide at least one concept to continue"
+                    self.set_status(400)
+                    self.write("File must contain atleast one document...")
+                    return
                 else:
+                    data['respond'] = "<b>{0} Documents</b> loaded successfully!".format(lines_num)
                     data['data'] = lines_num
                 self.write(json.dumps(data))
                 self.finish()
@@ -598,8 +650,63 @@ class configureProfileHandler(BaseHandler):
                 self.finish()
             # post case for the actual mining proccess
             else:
+                # get the database cursor
+                cursor=msettings.Connection.cursor()
+
                 # data to be sent
                 data = {}
+
+                # set the textwindow size
+                extracontextprev = 10
+                extracontextnext = 10
+                contextprev = 10
+                contextnext = 5
+                # Automatically find middle size from grant codes white spaces
+                querygrantsize = "select max(p1) from (select regexpcountwords('\s',stripchars(p1)) as p1 from (setschema 'p1,p2' file '/tmp/p{0}.tsv' dialect:tsv))".format(user_id)
+                contextmiddle = [r for r in cursor.execute(querygrantsize)][0][0]+1
+                if 'contextprev' in self.request.arguments and self.request.arguments['contextprev'][0] != '':
+                    contextprev = int(self.request.arguments['contextprev'][0])
+                    if contextprev < 0 or contextprev > 20:
+                        self.set_status(400)
+                        self.write("Context size must be in its limits...")
+                        return
+                if 'contextnext' in self.request.arguments and self.request.arguments['contextnext'][0] != '':
+                    contextnext = int(self.request.arguments['contextnext'][0])
+                    if contextnext < 0 or contextnext > 20:
+                        self.set_status(400)
+                        self.write("Context size must be in its limits...")
+                        return
+                j2sextraprev = "j2s(prev1"
+                for cnt in xrange(2,extracontextprev+1):
+                    j2sextraprev += ",prev"+str(cnt)
+                j2sextraprev += ")"
+                j2sprev = ""
+                j2scontext = "("
+                if contextprev:
+                    j2scontext = "j2s(prev"+str(extracontextprev+1)
+                    j2sprev = "j2s(prev"+str(extracontextprev+1)
+                    for cnt in xrange(extracontextprev+2,extracontextprev+contextprev+1):
+                        j2sprev += ",prev"+str(cnt)
+                        j2scontext += ",prev"+str(cnt)
+                    j2sprev += ")"
+                    j2scontext += ","
+                else:
+                    j2scontext = "j2s("
+                j2snext = "j2s(next1"
+                j2scontext += "middle"
+                if contextnext:
+                    j2scontext += ",next1"
+                    for cnt in xrange(2,contextnext+1):
+                        j2snext += ",next"+str(cnt)
+                        j2scontext += ",next"+str(cnt)
+                    j2snext += ")"
+                j2scontext += ")"
+                j2sextranext = "j2s(next"+str(contextnext+1)
+                for cnt in xrange(contextnext+2,extracontextnext+contextnext+1):
+                    j2sextranext += ",next"+str(cnt)
+                j2sextranext += ")"
+                print j2sextraprev, j2sprev, j2snext, j2sextranext, j2scontext
+
                 # create positive and negative words weighted regex text
                 pos_set = neg_set = conf = whr_conf = ''
                 if 'poswords' in self.request.arguments and self.request.arguments['poswords'][0] != '{}':
@@ -607,7 +714,10 @@ class configureProfileHandler(BaseHandler):
                     # construct math string for positive words matching calculation with weights
                     pos_words = json.loads(self.request.arguments['poswords'][0])
                     for key, value in pos_words.iteritems():
-                        pos_set += r'regexpcountuniquematches("(?:\b)%s(?:\b)",j2s(prev,middle,next))*%s + ' % (key,value)
+                        # MONO GIA TO EGI
+                        pos_set += r'regexpcountuniquematches("%s",%s)*%s + ' % (key,j2scontext,value)
+                        # ORIGINAL
+                        # pos_set += r'regexpcountuniquematches("(?:\b)%s(?:\b)",j2s(prev,middle,next))*%s + ' % (key,value)
                         data['poswords'].append(key)
                     pos_set += "0"
                 if 'negwords' in self.request.arguments and self.request.arguments['negwords'][0] != '{}':
@@ -615,7 +725,10 @@ class configureProfileHandler(BaseHandler):
                     # construct math string for negative words matching calculation with weights
                     neg_words = json.loads(self.request.arguments['negwords'][0])
                     for key, value in neg_words.iteritems():
-                        neg_set += r'regexpcountuniquematches("(?:\b)%s(?:\b)",j2s(prev,middle,next))*%s - ' % (key,value)
+                        # MONO GIA TO EGI
+                        neg_set += r'regexpcountuniquematches("%s",%s)*%s + ' % (key,j2scontext,value)
+                        # ORIGINAL
+                        # neg_set += r'regexpcountuniquematches("(?:\b)%s(?:\b)",j2s(prev,middle,next))*%s - ' % (key,value)
                         data['negwords'].append(key)
                     neg_set += "0"
                 if pos_set != '' and neg_set != '':
@@ -628,25 +741,23 @@ class configureProfileHandler(BaseHandler):
                     conf += ' as conf'
                     whr_conf = 'and conf>=0'
 
-                # get the database cursor
-                cursor=msettings.Connection.cursor()
-
                 if numberOfDocsUploaded(user_id) != 0:
-                    doc_filters = "regexpr('[\n|\r]',d2,' ')"
-                    ackn_filters = "regexpr(\"\\'\", p2,'')"
+                    doc_filters = "comprspaces(regexpr('[\n|\r]',d2,' '))"
+                    ackn_filters = "comprspaces(regexpr(\"\\'\", p2,''))"
                     if 'punctuation' in self.request.arguments and self.request.arguments['punctuation'][0] == "1":
                         doc_filters = 'keywords('+doc_filters+')'
                         ackn_filters = 'keywords('+ackn_filters+')'
-                    if 'lettercase' in self.request.arguments and self.request.arguments['lettercase'][0] != '' and self.request.arguments['lettercase'][0] != 'None':
-                        if self.request.arguments['lettercase'][0] == 'Lowercase':
+                    if 'lettercase' in self.request.arguments and self.request.arguments['lettercase'][0] != '' and self.request.arguments['lettercase'][0] != 'none':
+                        if self.request.arguments['lettercase'][0] == 'lowercase':
                             doc_filters = 'lower('+doc_filters+')'
                             ackn_filters = 'lower('+ackn_filters+')'
-                        elif self.request.arguments['lettercase'][0] == 'Uppercase':
+                        elif self.request.arguments['lettercase'][0] == 'uppercase':
                             doc_filters = 'upper('+doc_filters+')'
                             ackn_filters = 'upper('+ackn_filters+')'
                     if 'stopwords' in self.request.arguments and self.request.arguments['stopwords'][0] == "1":
                         doc_filters = 'filterstopwords('+doc_filters+')'
                         ackn_filters = 'filterstopwords('+ackn_filters+')'
+                    print "DOCCC", doc_filters
                     list(cursor.execute("drop table if exists grantstemp"+user_id, parse=False))
                     query_pre_grants = "create temp table grantstemp{0} as select stripchars(p1) as gt1, case when p2 is null then null else {1} end as gt2 from (setschema 'p1,p2' file '/tmp/p{0}.tsv' dialect:tsv)".format(user_id, ackn_filters)
                     cursor.execute(query_pre_grants)
@@ -654,27 +765,38 @@ class configureProfileHandler(BaseHandler):
                     query1 = "create temp table docs{0} as select d1, {1} as d2 from (setschema 'd1,d2' select jsonpath(c1, '$.id', '$.text') from (file '/tmp/docs{0}.json'))".format(user_id, doc_filters)
                     cursor.execute(query1)
                 else:
-                    data['error'] = "You have to provide at least one concept to continue"
-                    self.write(json.dumps(data))
-                    self.finish()
+                    self.set_status(400)
+                    self.write("You have to provide atleast 1 document...")
                     return
 
                 list(cursor.execute("drop table if exists grants"+user_id, parse=False))
                 # string concatenation workaround because of the special characters conflicts
                 if 'wordssplitnum' in self.request.arguments and self.request.arguments['wordssplitnum'][0] != '':
                     words_split = int(self.request.arguments['wordssplitnum'][0])
+                    # MONO GIA TO EGI
                     if 0 < words_split and words_split <= 10:
-                        acknowledgment_split = r'textwindow2s(regexpr("([\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|])", gt2, "\\\1"),0,'+str(words_split)+r',0)'
+                        acknowledgment_split = r'textwindow2s(gt2,0,'+str(words_split)+r',0)'
                     else:
-                        acknowledgment_split = r'"prev" as prev, regexpr("([\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|])", gt2, "\\\1") as middle, "next" as next'
+                        acknowledgment_split = r'"dummy" as prev, gt2 as middle, "dummy" as next'
+                    # ORIGINAL
+                    # if 0 < words_split and words_split <= 10:
+                    #     acknowledgment_split = r'textwindow2s(regexpr("([\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|])", gt2, "\\\1"),0,'+str(words_split)+r',0)'
+                    # else:
+                    #     acknowledgment_split = r'"dummy" as prev, regexpr("([\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|])", gt2, "\\\1") as middle, "dummy" as next'
+
                     # query0 = r"create temp table grants"+user_id+r' as select gt1 as g1, jmergeregexp(jgroup("(?<=[\s\b])"||middle||"(?=[\s\b])")) as g2 from '+r"(setschema 'gt1,prev,middle,next' select gt1, "+acknowledgment_split+r' from grantstemp'+user_id+r' where (gt1 or gt1!="") and gt2 not null) group by gt1 union all select distinct gt1 as g1, "(?!.*)" as g2 from grantstemp'+user_id+r" where (gt1 or gt1!='') and gt2 is null"
-                    query0 = r"create temp table grants"+user_id+r' as select gt1 as g1, jmergeregexp(jgroup(middle)) as g2 from '+r"(setschema 'gt1,prev,middle,next' select gt1, "+acknowledgment_split+r' from grantstemp'+user_id+r' where (gt1 or gt1!="") and gt2 not null) group by gt1 union all select distinct gt1 as g1, "(?!.*)" as g2 from grantstemp'+user_id+r" where (gt1 or gt1!='') and gt2 is null"
+                    query0 = r"create temp table grants"+user_id+r' as select gt1 as g1, jmergeregexp(jgroup(middle)) as g2 from '+r"(setschema 'gt1,prev,middle,next' select gt1, "+acknowledgment_split+r' from grantstemp'+user_id+r' where (gt1 or gt1!="") and gt2 != "") group by gt1 union all select distinct gt1 as g1, "(?!.*)" as g2 from grantstemp'+user_id+r" where (gt1 or gt1!='') and gt2 = ''"
                     cursor.execute(query0)
                     query0get = "select * from grants{0}".format(user_id)
                     results0get = [r for r in cursor.execute(query0get)]
                     print results0get
 
-                query2 = "select d1, g1, context, acknmatch, max(confidence) as confidence from (select d1, g1, regexpcountuniquematches(g2, j2s(prev,middle,next)) as confidence, j2s(prev,middle,next) as context, regexprfindall(g2, j2s(prev,middle,next)) as acknmatch {0} from (select d1, textwindow2s(d2,20,1,20) from (select * from docs{1})), (select g1, g2 from grants{1}) T where middle = T.g1 {2}) group by d1".format(conf, user_id, whr_conf)
+                # FOR EGI ONLY
+                query2 = r'select distinct d1, g1, extraprev, prev, middle, next, extranext, acknmatch, max(confidence) as confidence from (select d1, g1, regexpcountuniquematches(g2, '+j2scontext+r') as confidence, stripchars('+j2sextraprev+r') as extraprev, stripchars('+j2sprev+r') as prev, middle, stripchars('+j2snext+r') as next, stripchars('+j2sextranext+r') as extranext, '+j2scontext+r' as context, regexprfindall(g2, '+j2scontext+r') as acknmatch '+conf+r' from (select d1, textwindow(d2,'+str(extracontextprev+contextprev)+r','+str(extracontextnext+contextnext)+r','+str(contextmiddle)+r') from docs'+user_id+r'), (select g1, g2 from grants'+user_id+r') T where regexprmatches("(\b|\d|\W)"||T.g1||"(\b|\d|\W)",middle) '+whr_conf+r') group by d1'
+                # ORIGINAL
+                # query2 = "select d1, g1, context, acknmatch, max(confidence) as confidence from (select d1, g1, regexpcountuniquematches(g2, j2s(prev,middle,next)) as confidence, j2s(prev,middle,next) as context, regexprfindall(g2, j2s(prev,middle,next)) as acknmatch {0} from (select d1, textwindow2s(d2,20,{3},20) from docs{1}), (select g1, g2 from grants{1}) T where regexprmatches(T.g1,middle) {2}) group by d1".format(conf, user_id, whr_conf, contextmiddle)
+
+                # OLD ONE
                 # query2 = "select c1, c3 {0} from (select c1, textwindow2s(c2,10,1,5) from (select * from docs{1})), (select c3 from grants{1}) T where middle = T.c3 {2}".format(conf, user_id, whr_conf)
                 results = [r for r in cursor.execute(query2)]
                 print results
@@ -682,16 +804,16 @@ class configureProfileHandler(BaseHandler):
                 for r in results:
                     if r[0] not in doctitles:
                         doctitles[r[0]] = []
-                    doctitles[r[0]].append({"match": r[1], "context": r[2], "acknmatch": json.loads(r[3]), "confidence": r[4]})
+                    doctitles[r[0]].append({"match": r[1], "extraprev": r[2], "prev": r[3], "middle": r[4], "next":r[5],  "extranext":r[6], "acknmatch": json.loads(r[7]), "confidence": r[8]})
                 data['matches'] = doctitles
+                data['respond'] = "Matching results updated!"
                 self.write(json.dumps(data))
                 self.flush()
                 self.finish()
 
         except Exception as ints:
-            data = {}
-            data['error'] = "<b style=\"color: red\">Something went very very wrong!</b>"
-            self.write(json.dumps(data))
+            self.set_status(400)
+            self.write("A server error occurred, please contact administrator!")
             self.finish()
             print ints
 
@@ -759,7 +881,7 @@ class saveProfileHandler(BaseHandler):
                 cursor.execute("create table filters(c1,c2)", parse=False)
                 # Create grants table
                 cursor.execute("drop table if exists grants", parse=False)
-                cursor.execute("create table grants(c1)", parse=False)
+                cursor.execute("create table grants(c1,c2)", parse=False)
                 if 'poswords' in self.request.arguments and self.request.arguments['poswords'][0] != '{}':
                     # construct math string for positive words matching calculation with weights
                     pos_words = json.loads(self.request.arguments['poswords'][0])
@@ -785,7 +907,7 @@ class saveProfileHandler(BaseHandler):
                               )
                     )
                 if numberOfGrantsUploaded(user_id, self.get_secure_cookie('madgikmining_grantsuploaded')) != 0:
-                      cursor.execute("insert into grants select stripchars(c1) as c1 from (file '/tmp/p{0}.csv')".format(user_id))
+                      cursor.execute("insert into grants select stripchars(c1) as c1, stripchars(c2) as c2 from (file '/tmp/p{0}.tsv')".format(user_id))
                 cursor.close()
 
                 data = {}
diff --git a/interactive-mining-madoap/madoap/src/static/OA DISCOVER_A.png b/interactive-mining-madoap/madoap/src/static/OA DISCOVER_A.png
index e8c097c..e15058e 100644
Binary files a/interactive-mining-madoap/madoap/src/static/OA DISCOVER_A.png and b/interactive-mining-madoap/madoap/src/static/OA DISCOVER_A.png differ
diff --git a/interactive-mining-madoap/madoap/src/static/OA DISCOVER_B.png b/interactive-mining-madoap/madoap/src/static/OA DISCOVER_B.png
index 26d4846..75d2070 100644
Binary files a/interactive-mining-madoap/madoap/src/static/OA DISCOVER_B.png and b/interactive-mining-madoap/madoap/src/static/OA DISCOVER_B.png differ
diff --git a/interactive-mining-madoap/madoap/src/static/animations.css b/interactive-mining-madoap/madoap/src/static/animations.css
index 904d84c..cd74718 100644
--- a/interactive-mining-madoap/madoap/src/static/animations.css
+++ b/interactive-mining-madoap/madoap/src/static/animations.css
@@ -1,5 +1,5 @@
 /*ANIMATIONS*/
-tr.new-item {
+tr.new-item, li.new-item {
   opacity:0;
   -webkit-animation:fadeIn .1s linear forwards;
   -o-animation:fadeIn .1s linear forwards;
@@ -17,7 +17,7 @@ tr.new-item {
   }
 }
 
-tr.removed-item {
+tr.removed-item, li.removed-item {
   -webkit-animation: removed-item-animation .3s cubic-bezier(.55,-0.04,.91,.94) forwards;
   -o-animation: removed-item-animation .3s cubic-bezier(.55,-0.04,.91,.94) forwards;
   animation: removed-item-animation .3s cubic-bezier(.55,-0.04,.91,.94) forwards
diff --git a/interactive-mining-madoap/madoap/src/static/configure-profile.js b/interactive-mining-madoap/madoap/src/static/configure-profile.js
index b284800..1b003f0 100644
--- a/interactive-mining-madoap/madoap/src/static/configure-profile.js
+++ b/interactive-mining-madoap/madoap/src/static/configure-profile.js
@@ -39,8 +39,10 @@
 
     var handleMatchLevelChoice = function() {
         $('#1-level').on('click', function( e ) {
+            $(".cm-config-option.active").removeClass("active");
+            $(this).addClass("active");
             if (advanced_options_open) {
-                UIkit.accordion($('#advanced-opts-toggle')).toggle(0, true);
+                toggleAdvancedTools();
                 advanced_options_open = 0;
             }
             if (match_level_choice != 0) {
@@ -57,8 +59,10 @@
             match_level_choice = 0;
         });
         $('#2-level').on('click', function( e ) {
+            $(".cm-config-option.active").removeClass("active");
+            $(this).addClass("active");
             if (advanced_options_open) {
-                UIkit.accordion($('#advanced-opts-toggle')).toggle(0, true);
+                toggleAdvancedTools();
                 advanced_options_open = 0;
             }
             if (match_level_choice != 1) {
@@ -71,8 +75,10 @@
             match_level_choice = 1;
         });
         $('#3-level').on('click', function( e ) {
+            $(".cm-config-option.active").removeClass("active");
+            $(this).addClass("active");
             if (advanced_options_open) {
-                UIkit.accordion($('#advanced-opts-toggle')).toggle(0, true);
+                toggleAdvancedTools();
                 advanced_options_open = 0;
             }
             if (match_level_choice != 2) {
@@ -84,9 +90,52 @@
             }
             match_level_choice = 2;
         });
-        $('#c-level').on('click', function( e ) {
+        // $('#c-level').on('click', function( e ) {
+        //     $(".cm-config-option.active").removeClass("active");
+        //     $(this).addClass("active");
+        //     if (advanced_options_open == 0) {
+        //         toggleAdvancedTools();
+        //         advanced_options_open = 1;
+        //     }
+        //     if (match_level_choice != 3) {
+        //         console.log('#c-level');
+        //         // store change to localstorage
+        //         localStorage.setItem('matchlevel', "#c-level");
+        //     }
+        // });
+
+        $("#advaned-tools-label").change(function() {
+            if(this.checked) {
+                advanced_options_open = 1;
+                $(".cm-config-option.active").removeClass("active");
+                // $('#c-level').click();
+                $('#advaned-tools').show();
+                localStorage.setItem('matchlevel', "#c-level");
+            } else {
+                advanced_options_open = 0;
+                if (match_level_choice == 0 || match_level_choice == -1 || match_level_choice == 3) {
+                    match_level_choice = 3;
+                    $('#1-level').click();
+                } else if (match_level_choice == 1) {
+                    match_level_choice = 3;
+                    $('#2-level').click();
+                } else if (match_level_choice == 2) {
+                    match_level_choice = 3;
+                    $('#3-level').click();
+                }
+                $('#advaned-tools').hide();
+            }
+        });
+
+        // UIkit.accordion($('#advanced-opts-toggle')).toggle(0, true);
+        // UIkit.switcher($('#uk-switcher')).show(3);
+        // UIkit.switcher($('.uk-switcher')).show(3);
+    }
+
+    var handlePreccisionMode = function(choice) {
+        if (choice === "#c-level") {
             if (advanced_options_open == 0) {
-                UIkit.accordion($('#advanced-opts-toggle')).toggle(0, true);
+                toggleAdvancedTools();
                 advanced_options_open = 1;
             }
             if (match_level_choice != 3) {
@@ -94,43 +143,25 @@
                 // store change to localstorage
                 localStorage.setItem('matchlevel', "#c-level");
             }
-        });
-        // $('#advanced-opts-toggle').on('show', function () {
-        //     console.log('#GG-level');
-        //     UIkit.switcher($('#uk-switcher')).show(3);
-        //     UIkit.switcher($('.uk-switcher')).show(3);
-        //     advanced_options_open = 1;
-        // });
-        // $('#advanced-opts-toggle').on('hide', function () {
-        //     console.log('#BB-level');
-        //     UIkit.switcher($('#uk-switcher')).show(match_level_choice);
-        //     UIkit.switcher($('.uk-switcher')).show(match_level_choice);
-        //     advanced_options_open = 0;
-        // });
-        
-        $('#advanced-opts-toggle').on('show', function () {
-            console.log('#GG-level');
-            advanced_options_open = 1;
-            $('#c-level').click();
-        });
-        $('#advanced-opts-toggle').on('hide', function () {
-            console.log('#BB-level');
-            advanced_options_open = 0;
-            if (match_level_choice == 0) {
-                match_level_choice = 3;
-                $('#1-level').click();
-            } else if (match_level_choice == 1) {
-                match_level_choice = 3;
-                $('#2-level').click();
-            } else if (match_level_choice == 2) {
-                match_level_choice = 3;
-                $('#3-level').click();
-            }
-        });
+        } else {
+            $(choice).click();
+        }
+    }
 
-        // UIkit.accordion($('#advanced-opts-toggle')).toggle(0, true);
-        // UIkit.switcher($('#uk-switcher')).show(3);
-        // UIkit.switcher($('.uk-switcher')).show(3);
+    var toggleAdvancedTools = function() {
+        if($("#advaned-tools-label").prop('checked')) {
+            $("#advaned-tools-label").prop('checked', false);
+            $("#advaned-tools-label").attr('checked', false);
+            $('#advaned-tools-label')[0].checked = false;
+            $('#advaned-tools-label').removeAttr('checked');
+            $('#advaned-tools').hide();
+        } else {
+            localStorage.setItem('matchlevel', "#c-level");
+            $("#advaned-tools-label").prop('checked', true);
+            $("#advaned-tools-label").attr('checked', true);
+            $('#advaned-tools-label')[0].checked = true;
+            $('#advaned-tools').show();
+        }
     }
 
 /////////// LIST FUNCTIONS
@@ -160,7 +191,7 @@
     }
 
     //generates a unique id
-    var generateId = function(is_pos){
+    var generateId = function(is_pos) {
         if (is_pos) {
             return "positive-" + +new Date() + Math.random().toFixed(5).substring(2);
         } else {
@@ -168,24 +199,49 @@
         }
     }
 
+    var wordAlreadyExists = function(is_pos, word) {
+        var found = false;
+        for (var key in localStorage) {
+            if (key === null)
+                continue;
+            var value = localStorage.getItem(key);
+            if(is_pos && key.indexOf('positive') === 0){
+                data = JSON.parse(value);
+                if (data.phrase === word) {
+                    found = true;
+                    alert("OOOOOOOOOP");
+                    break;
+                }
+            } else if (key.indexOf('negative') === 0) {
+                data = JSON.parse(value);
+                if (data.phrase === word) {
+                    found = true;
+                    alert("OOOOOOOOOP");
+                    break;
+                }
+            }
+        }
+        return found;
+    }
+
     var wordsDataToArray = function(is_pos) {
         // TODO
         var data = {};
         if (is_pos === 1) {
-            $("#word-pos tbody tr").each(function(i, v){
+            $("#word-pos li").each(function(i, v){
                 // data[i] = Array();
                 // $(this).children('td').each(function(ii, vv){
                 //     data[i][ii] = $(this).text();
                 // });
-                data[$(v).find("td.phrase").text()] = $(v).find("td.weight").text();
+                data[$(v).find("div.phrase").text()] = $(v).find("div.weight").text();
             })
         } else {
-            $("#word-neg tbody tr").each(function(i, v){
+            $("#word-neg li").each(function(i, v){
                 // data[i] = Array();
                 // $(this).children('td').each(function(ii, vv){
                 //     data[i][ii] = $(this).text();
                 // });
-                data[$(v).find("td.phrase").text()] = $(v).find("td.weight").text();
+                data[$(v).find("div.phrase").text()] = $(v).find("div.weight").text();
             })
         }
         
@@ -231,8 +287,8 @@
         });
         // Handle clicks outside editboxes
         $(document).click(function (event) {
-            if($(event.target).attr('class')!="thVal") {
-                saveEditBox(currentEle);
+            if($(event.target).hasClass('thVal')===false) {
+                saveEditBox(clickedElement);
                 $(document).off('click');
                 clickedElement = null;
             }
@@ -242,7 +298,7 @@
     // a fucntion to catch double click on positive and negative phrases edit boxes
     var addDoubleClick = function(element){
         $(element).click(function (event) {
-          if($(event.target).attr('class')!="thVal") {
+          if($(event.target).hasClass('thVal')===false) {
               event.stopPropagation();
               // save previous clicked box
               if (clickedElement)
@@ -261,7 +317,7 @@
               $(this).remove();
         });
         // remove from localstorage
-        localStorage.remove('#' + id);
+        localStorage.removeItem(id);
         if (is_pos === 1) {
             count_pos--;
         } else {
@@ -273,23 +329,25 @@
     var count_pos = 0, count_neg = 0;
 
     var addDataToTable = function(id, content_word, content_weight, is_pos) {
-        var row = '<tr id="' + id + '"><td class="phrase">' + content_word + '</td><td class="weight">' + content_weight +'</td></tr>'
-        table = $('#data-table tbody');
+        // with number column
+        // var row = '<li class="uk-grid-collapse uk-child-width-expand@s" uk-grid id="' + id + '"><div class="cm-number-space uk-text-center uk-width-1-5@m">'+count_pos+'</div><div class="uk-width-expand uk-text-left cm-text-input phrase">' + content_word + '</div><div class="uk-width-1-4@m uk-text-left cm-text-input weight">' + content_weight +'</div></li>'
+        var row = '<li class="uk-grid-collapse uk-child-width-expand@s" uk-grid id="' + id + '"><div class="uk-width-expand uk-text-left cm-text-input phrase">' + content_word + '</div><div class="uk-width-1-4@m uk-text-left cm-text-input weight">' + content_weight +'</div></li>'
+        table = $('#data-table');
 
         // if content is correct and not empty append to table
         if(!$('#'+ id).length){
 
             row = $(row).addClass('new-item');
             if (is_pos === 1) {
-                $('#word-pos tbody').append(row);
+                $('#word-pos').append(row);
             } else {
-                $('#word-neg tbody').append(row);
+                $('#word-neg').append(row);
             }
 
             // add all the item's extra functionality
             var createdItem = $('#'+ id);
             // delete button
-            createdItem.append($('<td />').append($('<a />', {
+            createdItem.append($('<div />' , {"class": "uk-width-1-4@m uk-text-center erase"}).append($('<a />', {
                                    "class" :"uk-icon-link",
                                    "uk-icon" : "icon: trash",
                                    "contenteditable" : "false",
@@ -300,8 +358,8 @@
                                              }
                                           }
                       })));
-            addDoubleClick($(createdItem).find("td.phrase"));
-            addDoubleClick($(createdItem).find("td.weight"));
+            addDoubleClick($(createdItem).find("div.phrase"));
+            addDoubleClick($(createdItem).find("div.weight"));
             createdItem.on('keydown', function(ev){
                 if(ev.keyCode === 13) return false;
             });
@@ -317,12 +375,6 @@
             obj["phrase"] = content_word;
             obj["weight"] = content_weight;
             localStorage.setItem(id, JSON.stringify(obj));
-            for(var key in localStorage){
-              if (key === null)
-                continue;
-              var json_string = localStorage.getItem(key);
-                console.log(key+' '+json_string);
-            }
         }
     }
 
@@ -331,6 +383,9 @@
             event.preventDefault();
             var input_word = $('#text-pos');
             word = input_word.val();
+            if(wordAlreadyExists(1,word)) {
+                return false;
+            }
             var input_weight = $('#weight-pos');
             weight = input_weight.val();
             if (word && weight){
@@ -344,6 +399,9 @@
             event.preventDefault();
             var input_word = $('#text-neg');
             word = input_word.val();
+            if(wordAlreadyExists(0,word)) {
+                return false;
+            }
             var input_weight = $('#weight-neg');
             weight = input_weight.val();
             if (word && weight){
@@ -361,7 +419,7 @@
     var deleteAllWords = function(warnUser = 1, is_pos) {
         if(!warnUser || confirm('Are you sure you want to delete all the items in the list? There is no turning back after that.')){                 //remove items from DOM
             if (is_pos) {
-                var items = $('tr[id ^= positive]');
+                var items = $('li[id ^= positive]');
                 items.addClass('removed-item').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                   $(this).remove();
                 });
@@ -377,7 +435,7 @@
                 count_pos = 0;
                 updateCounter(1);
             } else {
-                var items = $('tr[id ^= negative]');
+                var items = $('li[id ^= negative]');
                 items.addClass('removed-item').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                   $(this).remove();
                 });
@@ -403,43 +461,104 @@
     };
 
     var handleFiltersInput = function() {
-        $("#letter-case-select").on('change', function(e) {
-            localStorage.setItem('lettercase', $("#letter-case-select option:selected").text());
+        $("#context-prev-words").on('change', function(e) {
+            localStorage.setItem('contextprev', $("#context-prev-words").val());
         });
+        $("#context-next-words").on('change', function(e) {
+            localStorage.setItem('contextnext', $("#context-next-words").val());
+        });
+        $("#letter-case-radio .uk-radio").each(function() {$(this).on('change', function(e) {
+            console.log("YEAH");
+            localStorage.setItem('lettercase', $("#letter-case-radio input:checked").val());
+        })});
         $("#word-split").on('change', function(e) {
             localStorage.setItem('wordssplitnum', $("#word-split").val());
         });
         $("#stop-words-filter").on('change', function(e) {
             localStorage.setItem('stopwords', $('#stop-words-filter').prop('checked')===true?1:0);
-            console.log('stop-words-filter '+localStorage.getItem('stopwords'));
         });
         $("#punctuation-filter").on('change', function(e) {
             localStorage.setItem('punctuation', $('#punctuation-filter').prop('checked')===true?1:0);
-            console.log('punctuation-filter '+localStorage.getItem('punctuation'));
         });
     }
 
+    function highlightInElement(element, text){
+        var elementHtml = element.html();
+        var tags = [];
+        var tagLocations= [];
+        var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;
+
+        //Strip the tags from the elementHtml and keep track of them
+        var htmlTag;
+        while(htmlTag = elementHtml.match(htmlTagRegEx)){
+            tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
+            tags[tags.length] = htmlTag;
+            elementHtml = elementHtml.replace(htmlTag, '');
+        }
+
+        //Search for the text in the stripped html
+        var textLocation = elementHtml.search(text);
+        if(textLocation){
+            //Add the highlight
+            var highlightHTMLStart = "<span class='highlight'>";
+            var highlightHTMLEnd = "</span>";
+            elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);
+
+            //plug back in the HTML tags
+            var textEndLocation = textLocation + text.length;
+            for(i=tagLocations.length-1; i>=0; i--){
+                var location = tagLocations[i];
+                if(location > textEndLocation){
+                    location += highlightHTMLStart.length + highlightHTMLEnd.length;
+                } else if(location > textLocation){
+                    location += highlightHTMLStart.length;
+                }
+                elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
+            }
+        }
+
+        //Update the innerHTML of the element
+        element.html(elementHtml);
+        return element;
+    }
+
     var handleRunMiningButton = function() {
         $("#run-mining-btn").on('click', function( e ) {
             var formData = new FormData();
             formData.append("poswords", JSON.stringify(wordsDataToArray(1)));
             formData.append("negwords", JSON.stringify(wordsDataToArray(0)));
-            formData.append("lettercase", $("#letter-case-select option:selected").text());
+            formData.append("contextprev", $("#context-prev-words").val());
+            formData.append("contextnext", $("#context-next-words").val());
+            formData.append("lettercase", $("#letter-case-radio input:checked").val());
             formData.append("wordssplitnum", $("#word-split").val());
             formData.append("stopwords", $('#stop-words-filter').prop('checked')===true?1:0);
             formData.append("punctuation", $('#punctuation-filter').prop('checked')===true?1:0);
-            filters_list = {};
-            filters_list["lettercase"] = $("#letter-case-select option:selected").text();
-            filters_list["wordssplitnum"] = $("#word-split").val();
-            filters_list["stopwords"] = $('#stop-words-filter').prop('checked')===true?1:0;
-            filters_list["punctuation"] = $('#punctuation-filter').prop('checked')===true?1:0;
-            formData.append("filters", JSON.stringify(filters_list));
+            // filters_list = {};
+            // filters_list["lettercase"] = $("#letter-case-select option:selected").text();
+            // filters_list["wordssplitnum"] = $("#word-split").val();
+            // filters_list["stopwords"] = $('#stop-words-filter').prop('checked')===true?1:0;
+            // filters_list["punctuation"] = $('#punctuation-filter').prop('checked')===true?1:0;
+            // formData.append("filters", JSON.stringify(filters_list));
             $.ajax({
                 url: "configure-profile",
                 type: 'POST',
                 data: formData,
-                async: false,
+                async: true,
+                beforeSend: function () {
+                    // UIkit.modal($("#wait-spinner-modal-center")).show();
+                    $("#wait-spinner-modal-center").css("display", "flex");
+                    $("#wait-spinner-modal-center").addClass("uk-open");
+
+                },
                 success: function (data) {
+                    UIkit.modal($("#wait-spinner-modal-center")).hide();
+                    respond = JSON && JSON.parse(data).respond || $.parseJSON(data).respond;
+                    UIkit.notification({
+                      message: respond,
+                      status: 'success',
+                      pos: 'top-center',
+                      timeout: 5000
+                    });
                     obj = JSON && JSON.parse(data) || $.parseJSON(data);
                     console.log(obj);
                     // get poswords
@@ -455,76 +574,110 @@
                     // get matches
                     var matches = [];
                     if (obj.hasOwnProperty("matches")) {
+                        var matches_counter = 0;
                         doc_matches = obj["matches"];
+                        $("#docs-results").empty();
                         for (var docname in doc_matches) {
                             if (doc_matches.hasOwnProperty(docname)) {
                                 // create document section
-                                var li = $('<li class="uk-open"><h3 class="uk-accordion-title">'+docname+'</h3></li>');
+                                var li = $('<li class="uk-card uk-card-default uk-card-small uk-card-body uk-open"><h3 class="uk-accordion-title">'+docname+'</h3></li>');
                                 // create matches section
                                 word_matches = doc_matches[docname];
                                 var accordion_content = $('<div class="uk-accordion-content"></div>');
+                                var doc_match_count = 1;
                                 for (var match in word_matches) {
                                     console.log(word_matches[match]);
                                     var result = word_matches[match];
-                                    var paragraph = $('<p class="document-result">'+result.context.split(' ').map(function(x){return "<word>"+x+"</word>";}).join('')+'</p>');
-                                    // find center match string and surrounded text
-                                    var matched = paragraph.find(":contains('"+result.match+"')");
-                                    var prev = matched.prev();
-                                    var next = matched.next();
+                                    // construct middle match
+                                    // Find center match
+                                    var match_regexp = new RegExp(result.match, "g");
+
+
+
+                                    
+
+
+
+
+
+                                    // var paragraph = $('<p class="document-result">'+result.context.split(' ').map(function(x){return "<word>"+x+"</word>";}).join('')+'</p>');
+                                    // // find center match string and surrounded text
+                                    // var matched = paragraph.find(":contains('"+result.match+"')");
+                                    // var prev = matched.prev();
+                                    // var next = matched.next();
                                     // get textwindows text as context
                                     var context = [];
-                                    var prev_context = [];
-                                    var next_context = [];
-                                    for (i = 0; prev.text()!=''; i++) {
-                                        if (i < 10) {
-                                            context.unshift(prev.text());
-                                        } else {
-                                            prev_context.unshift(prev.text());
-                                        }
-                                        prev = prev.prev();
-                                    }
-                                    context.push(matched.text());
-                                    for (i = 0; next.text()!=''; i++) {
-                                        if (i < 5) {
-                                            context.push(next.text());
-                                        } else {
-                                            next_context.push(next.text());
-                                        }
-                                        next = next.next();
-                                    }
+                                    context.push(result.prev);
+                                    context.push(result.middle);
+                                    context.push(result.next);
+
+                                    // var prev_context = [];
+                                    // var next_context = [];
+                                    // for (i = 0; prev.text()!=''; i++) {
+                                    //     if (i < 10) {
+                                    //         context.unshift(prev.text());
+                                    //     } else {
+                                    //         prev_context.unshift(prev.text());
+                                    //     }
+                                    //     prev = prev.prev();
+                                    // }
+                                    // context.push(matched.text());
+                                    // for (i = 0; next.text()!=''; i++) {
+                                    //     if (i < 5) {
+                                    //         context.push(next.text());
+                                    //     } else {
+                                    //         next_context.push(next.text());
+                                    //     }
+                                    //     next = next.next();
+                                    // }
+
+
                                     // hightlight textwindow
-                                    context = $('<span class="textwindow" style="background-color: #fff2ba;">'+context.join(' ')+'</span>');
+                                    context = $('<span class="textwindow">'+context.join(' ')+'</span>');
                                     // hightlight positive words
                                     for (var index in poswords) {
                                         var search_regexp = new RegExp(poswords[index], "g");
-                                        context.html(context.html().replace(search_regexp,"<span style='background: #a5ffbf;' class='positive'>"+poswords[index]+"</span>"));
+                                        context.html(context.html().replace(search_regexp,"<span class='positive'>"+poswords[index]+"</span>"));
                                     }
                                     // hightlight acknowledgment keywords
                                     if (result.hasOwnProperty("acknmatch")) {
                                         var acknmatches = result["acknmatch"];
                                         for (var index in acknmatches) {
                                             var search_regexp = new RegExp(acknmatches[index], "g");
-                                            context.html(context.html().replace(search_regexp,"<span style='background: #a5ffbf;' class='positive'>"+acknmatches[index]+"</span>"));
+                                            context.html(context.html().replace(search_regexp,"<span class='positive'>"+acknmatches[index]+"</span>"));
                                         }
                                     }
                                     // hightlight negative words
                                     for (var index in negwords) {
                                         var search_regexp = new RegExp(negwords[index], "g");
-                                        context.html(context.html().replace(search_regexp,"<span style='background: #ffc5c5;' class='negative'>"+negwords[index]+"</span>"));
+                                        context.html(context.html().replace(search_regexp,"<span class='negative'>"+negwords[index]+"</span>"));
                                     }
-                                    // hightlight matched phrase
-                                    var search_regexp = new RegExp(result.match, "g");
-                                    context.html(context.html().replace(search_regexp,"<span style='background: #aee4f7;' class='highlight'><b>"+result.match+"</b></span>"));
 
+                                    // TESTTTTTTTTT
+                                    context = highlightInElement(context, result.match);
+
+                                    // // hightlight matched phrase
+                                    // var search_regexp = new RegExp(result.match, "g");
+                                    // context.html(context.html().replace(search_regexp,"<span style='background: #aee4f7;' class='highlight'><b>"+result.match+"</b></span>"));
+
+                                    match_title = $('<h7 class="match">Match '+(matches_counter+1)+': '+result.match+'</h7>');
+                                    doc_match_count++;
+                                    matches_counter++;
+                                    accordion_content.append(match_title);
                                     // construct results paragraph to show
-                                    paragraph = $('<p class="document-result">'+prev_context.join(' ')+' '+context[0].outerHTML+' '+next_context.join(' ')+'</p>');
-
-                                    li.append(paragraph);
+                                    paragraph = $('<p class="cm-document-result">'+result.extraprev+' '+context[0].outerHTML+' '+result.extranext+'</p>');
+                                    accordion_content.append(paragraph);
+                                    li.append(accordion_content);
                                 }
                                 $("#docs-results").append(li);
                             }
                         }
                         UIkit.accordion($("#docs-results"));
+                        var prev_res_cnt = $("#results-number").html();
+                        $("#results-number").html(matches_counter+" matches found");
+                        if (prev_res_cnt != "") {
+                            $("#results-number-previous").html(prev_res_cnt+" previously");
+                        }
                     }
                     $("#results-section").show();
                     // split all paragraphs to word spans
@@ -549,8 +702,13 @@
                     // });
                 },
                 error: function (xhr, ajaxOptions, thrownError) {
-                  $('#file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
-                  // $('#file-uploaded')[0].checked = false;
+                    UIkit.modal($("#wait-spinner-modal-center")).hide();
+                    UIkit.notification({
+                        message: xhr.status,
+                        status: 'danger',
+                        pos: 'top-center',
+                        timeout: 0
+                    });
                 },
                 cache: false,
                 contentType: false,
@@ -567,20 +725,54 @@
     }
 
     var hideInitialDocsUploadForm = function() {
-        console.log("AAAAAAAAA")
+        $(".cm-results-hide-pannel").hide();
         $("#docs-more-btn").show();
         $("#run-mining-btn").removeAttr('disabled').removeClass('disabled');
         $('#documents-change-btn').addClass("uk-button");
         $('#initial-docs-upload-form').attr("class", "");
+        $('#initial-docs-upload-form').addClass("cm-docs-selection-form-dialog");
         $('#initial-docs-upload-form').attr("uk-dropdown", "mode: click;");
         $('#initial-docs-upload-form').appendTo("#documents-section");
         UIkit.dropdown($("#initial-docs-upload-form"));
-        UIkit.dropdown($("#initial-docs-upload-form")).mode = "click";
+        $("#initial-docs-upload-form").mode = "click";
+        stickyResultsHeader = UIkit.sticky($("#cm-results-section-header"), {
+            top: 25,
+            showOnUp: true,
+            animation: "uk-animation-slide-top",
+            bottom: ".cm-results-section"
+        });
+        console.log(stickyResultsHeader);
+        $("#initial-docs-upload-form").on('beforeshow', function () {
+            $(".cm-results-hide-pannel").show();
+            $(".cm-header-hide-pannel").addClass("cm-header-shown");
+            stickyResultsHeader.$destroy();
+            stickyResultsHeader = UIkit.sticky($("#cm-results-section-header"), {
+                top: 25,
+                bottom: ".cm-results-section"
+            });
+        });
+        $("#initial-docs-upload-form").on('hidden', function () {
+            $(".cm-results-hide-pannel").hide();
+            $(".cm-header-hide-pannel").removeClass("cm-header-shown");
+            stickyResultsHeader.$destroy();
+            stickyResultsHeader = UIkit.sticky($("#cm-results-section-header"), {
+                top: 25,
+                showOnUp: true,
+                animation: "uk-animation-slide-top",
+                bottom: ".cm-results-section"
+            });
+            // stickyResultsHeader = UIkit.sticky($("#cm-results-section-header"), {
+            //     top: 25,
+            //     showOnUp: true,
+            //     animation: "uk-animation-slide-top",
+            //     bottom: ".cm-results-section"
+            // });
+        });
         handleRunMiningButton();
     }
 
     var handleFileUploadInput = function() {
-        $("#docs-file-input").on('change', function() {
+        $("form#docs-file-input").on('change', function() {
             if ($('#docs-file-input')[0].value === "") {
               return false;
             }
@@ -591,9 +783,19 @@
                 url: "configure-profile",
                 type: 'POST',
                 data: formData,
-                async: false,
+                async: true,
+                beforeSend: function () {
+                    // UIkit.modal($("#wait-spinner-modal-center")).show();
+                },
                 success: function (data) {
-// TODO TODO TODO TODO TODO TODO check for error
+                    // UIkit.modal($("#wait-spinner-modal-center")).hide();
+                    respond = JSON && JSON.parse(data).respond || $.parseJSON(data).respond;
+                    UIkit.notification({
+                      message: respond,
+                      status: 'success',
+                      pos: 'top-center',
+                      timeout: 5000
+                    });
                     obj = JSON && JSON.parse(data).data || $.parseJSON(data).data;
                     // console.log(obj);
                     if (obj > 0) {
@@ -605,8 +807,13 @@
                     }
                 },
                 error: function (xhr, ajaxOptions, thrownError) {
-                  $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
-                  // $('#file-uploaded')[0].checked = false;
+                    // UIkit.modal($("#wait-spinner-modal-center")).hide();
+                    UIkit.notification({
+                        message: xhr.status,
+                        status: 'danger',
+                        pos: 'top-center',
+                        timeout: 0
+                    });
                 },
                 cache: false,
                 contentType: false,
@@ -616,6 +823,59 @@
 
             return false;
         });
+
+        var bar = document.getElementById('js-progressbar');
+        UIkit.upload('.js-upload', {
+            url: 'configure-profile',
+            multiple: false,
+            name: 'upload',
+            loadStart: function (e) {
+                bar.removeAttribute('hidden');
+                bar.max = e.total;
+                bar.value = e.loaded;
+            },
+            progress: function (e) {
+                bar.max = e.total;
+                bar.value = e.loaded;
+            },
+            loadEnd: function (e) {
+                bar.max = e.total;
+                bar.value = e.loaded;
+            },
+            completeAll: function (data) {
+                console.log(data.responseText);
+                setTimeout(function () {
+                    bar.setAttribute('hidden', 'hidden');
+                }, 1000);
+                // UIkit.modal($("#wait-spinner-modal-center")).hide();
+                respond = JSON && JSON.parse(data.responseText).respond || $.parseJSON(data.responseText).respond;
+                UIkit.notification({
+                  message: respond,
+                  status: 'success',
+                  pos: 'top-center',
+                  timeout: 5000
+                });
+                obj = JSON && JSON.parse(data.responseText).data || $.parseJSON(data.responseText).data;
+                // console.log(obj);
+                if (obj > 0) {
+                    if (uploadedDocs == 0) {
+                        hideInitialDocsUploadForm();
+                    }
+                    docsUploaded(obj);
+                    UIkit.dropdown($("#initial-docs-upload-form")).hide();
+                }
+            },
+            error: function (xhr, ajaxOptions, thrownError) {
+              $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.responseText)
+                // $('#file-uploaded')[0].checked = false;
+              UIkit.notification({
+                message: xhr.responseText,
+                status: 'danger',
+                pos: 'top-center',
+                timeout: 0
+              });
+            }
+        });
     }
 
     var handleDocSampleChoice = function(btnIndex) {
@@ -633,9 +893,19 @@
             url: "configure-profile",
             type: 'POST',
             data: formData,
-            async: false,
+            async: true,
+            beforeSend: function () {
+                // UIkit.modal($("#wait-spinner-modal-center")).show();
+            },
             success: function (data) {
-// TODO TODO TODO TODO TODO TODOcheck for error
+                // UIkit.modal($("#wait-spinner-modal-center")).hide();
+                respond = JSON && JSON.parse(data).respond || $.parseJSON(data).respond;
+                UIkit.notification({
+                  message: respond,
+                  status: 'success',
+                  pos: 'top-center',
+                  timeout: 5000
+                });
                 obj = JSON && JSON.parse(data).data || $.parseJSON(data).data;
                 if (obj > 0) {
                     if (uploadedDocs == 0) {
@@ -646,8 +916,13 @@
                 }
             },
             error: function (xhr, ajaxOptions, thrownError) {
-              $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
-              // $('#file-uploaded')[0].checked = false;
+                // UIkit.modal($("#wait-spinner-modal-center")).hide();
+                UIkit.notification({
+                    message: xhr.status,
+                    status: 'danger',
+                    pos: 'top-center',
+                    timeout: 0
+                });
             },
             cache: false,
             contentType: false,
@@ -675,7 +950,9 @@
         formData.append("poswords", JSON.stringify(wordsDataToArray(1)));
         formData.append("negwords", JSON.stringify(wordsDataToArray(0)));
         filters_list = {};
-        filters_list["lettercase"] = $("#letter-case-select option:selected").text();
+        filters_list["contextprev"] = $("#context-prev-words").val();
+        filters_list["contextnext"] = $("#context-next-words").val();
+        filters_list["lettercase"] = $("#letter-case-radio input:checked").val();
         filters_list["wordssplitnum"] = $("#word-split").val();
         filters_list["stopwords"] = $('#stop-words-filter').prop('checked')===true?1:0;
         filters_list["punctuation"] = $('#punctuation-filter').prop('checked')===true?1:0;
@@ -684,8 +961,12 @@
             url: "save-profile",
             type: 'POST',
             data: formData,
-            async: false,
+            async: true,
+            beforeSend: function () {
+                // UIkit.modal($("#wait-spinner-modal-center")).show();
+            },
             success: function (data) {
+                // UIkit.modal($("#wait-spinner-modal-center")).hide();
                 console.log(data)
                 // if (data.indexOf('successfully!') != -1) {
                 //   $('#file-uploaded')[0].checked = true;
@@ -693,8 +974,13 @@
                 window.location="save-profile"
             },
             error: function (xhr, ajaxOptions, thrownError) {
-              $('#file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
-              // $('#file-uploaded')[0].checked = false;
+                // UIkit.modal($("#wait-spinner-modal-center")).hide();
+                UIkit.notification({
+                    message: xhr.status,
+                    status: 'danger',
+                    pos: 'top-center',
+                    timeout: 0
+                });
             },
             cache: false,
             contentType: false,
@@ -706,9 +992,9 @@
         $("#next-button").on('click', function(e) {
             handleSaveProfileInfoSend();
         });
-        $("#save-profile-option").on('click', function(e) {
-            handleSaveProfileInfoSend();
-        });
+        // $("#save-profile-option").on('click', function(e) {
+        //     handleSaveProfileInfoSend();
+        // });
     }
 
     var checkAlreadyUploadedDocs = function() {
@@ -725,14 +1011,16 @@
               if (obj > 0) {
                 hideInitialDocsUploadForm();
                 docsUploaded(obj);
-              } else if (obj == -1) {
-                localStorage.clear();
               }
               init();
           },
           error: function (xhr, ajaxOptions, thrownError) {
-            $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
-            // $('#file-uploaded')[0].checked = false;
+            UIkit.notification({
+                message: xhr.status,
+                status: 'danger',
+                pos: 'top-center',
+                timeout: 0
+            });
           },
           cache: false,
           contentType: false,
@@ -741,6 +1029,7 @@
     }
 
     var checkAlreadyMiningSettings = function() {
+        console.log(localStorage)
         for (var key in localStorage) {
           if (key === null)
             continue;
@@ -754,9 +1043,13 @@
             addDataToTable(key, data.phrase, data.weight, 0);
           } else if (key === 'matchlevel') {
             console.log(key+' '+value);
-            $(value).click();
+            handlePreccisionMode(value);
+          } else if (key === 'contextprev') {
+            $("#context-prev-words").val(value);
+          } else if (key === 'contextnext') {
+            $("#context-next-words").val(value);
           } else if (key === 'lettercase') {
-            $("#letter-case-select").val(value);
+            $('#letter-case-radio input.'+value).prop('checked', true);
           } else if (key === 'wordssplitnum') {
             $("#word-split").val(value)
           } else if (key === 'stopwords') {
@@ -789,7 +1082,10 @@
         }
     }
 
+    var stickyResultsHeader = null;
+
     var init = function(){
+        $("#child1").stickySidebar();
         handleMatchLevelChoice();
         checkAlreadyMiningSettings();
         handleWordsInput();
diff --git a/interactive-mining-madoap/madoap/src/static/custom.css b/interactive-mining-madoap/madoap/src/static/custom.css
index ef73792..5b89990 100644
--- a/interactive-mining-madoap/madoap/src/static/custom.css
+++ b/interactive-mining-madoap/madoap/src/static/custom.css
@@ -6,6 +6,14 @@
 .tm-toolbar .uk-subnav-line .custom-discover-li  a{
   color:#05007A !important;
 }
+.tm-toolbar .uk-subnav-line .custom-connect-li {
+  color:#05007A !important;
+  background:#fff;
+  display: block;
+}
+.tm-toolbar .uk-subnav-line .custom-connect-li  a{
+  color:#05007A !important;
+}
 .custom-discover-toolbar   ul.uk-subnav.uk-subnav-line{
   background-color: #f25f30 !important;
   }
@@ -17,6 +25,17 @@
   .custom-discover-toolbar{
     border-top-color:#f25f30 !important;
   }
+.custom-connect-toolbar   ul.uk-subnav.uk-subnav-line{
+  background-color: #ffc800 !important;
+  }
+
+  .custom-connect-toolbar .inner {
+       background-color: #ffc800 !important;
+  }
+
+  .custom-connect-toolbar{
+    border-top-color:#ffc800 !important;
+  }
 .custom-footer{
    position:relative;
    bottom:0;
diff --git a/interactive-mining-madoap/madoap/src/static/database.db b/interactive-mining-madoap/madoap/src/static/database.db
index 57780be..7090403 100644
Binary files a/interactive-mining-madoap/madoap/src/static/database.db and b/interactive-mining-madoap/madoap/src/static/database.db differ
diff --git a/interactive-mining-madoap/madoap/src/static/dl119_files/custom.css b/interactive-mining-madoap/madoap/src/static/dl119_files/custom.css
index 4ed5436..656f06e 100644
--- a/interactive-mining-madoap/madoap/src/static/dl119_files/custom.css
+++ b/interactive-mining-madoap/madoap/src/static/dl119_files/custom.css
@@ -599,4 +599,741 @@ font-weight: 300;
 font-family: 'Open Sans', sans-serif !important;
 }
 .readon-button:hover {
+}
+
+
+/* TASOS css */
+
+/* Custom controls
+ ========================================================================== */
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Behave like most inline-block elements
+ */
+.uk-form-custom {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  position: relative;
+  /* 3 */
+  max-width: 100%;
+  /* 4 */
+  vertical-align: middle;
+}
+/*
+ * 1. Position and resize the form control to always cover its container
+ * 2. Required for Firefox for positioning to the left
+ * 3. Required for Webkit to make `height` work
+ * 4. Hide controle and show cursor
+ * 5. Needed for the cursor
+ * 6. Clip height caused by 5. Needed for Webkit only
+ */
+.uk-form-custom select,
+.uk-form-custom input[type="file"] {
+  /* 1 */
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  /* 2 */
+  left: 0;
+  /* 3 */
+  -webkit-appearance: none;
+  /* 4 */
+  opacity: 0;
+  cursor: pointer;
+}
+.uk-form-custom input[type="file"] {
+  /* 5 */
+  font-size: 500px;
+  /* 6 */
+  overflow: hidden;
+}
+/*
+ * Horizontal
+ */
+/* Tablet portrait and smaller */
+@media (max-width: 959px) {
+  /* Behave like `uk-form-stacked` */
+  .uk-form-horizontal .uk-form-label {
+    display: block;
+    margin-bottom: 5px;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-form-horizontal .uk-form-label {
+    width: 200px;
+    margin-top: 7px;
+    float: left;
+  }
+  .uk-form-horizontal .uk-form-controls {
+    margin-left: 215px;
+  }
+  /* Better vertical alignment if controls are checkboxes and radio buttons with text */
+  .uk-form-horizontal .uk-form-controls-text {
+    padding-top: 7px;
+  }
+}
+
+/* Custom Buttons
+ ========================================================================== */
+.cm-main-button {
+  background-color: #ffc800;
+  color: #2c2b5d;
+  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
+}
+
+.cm-main-button:hover {
+  background-color: #f7c200;
+  color: #2c2b5d;
+  box-shadow: 0 6px 50px rgba(0,0,0,0.08);
+}
+.cm-phrases-button {
+  padding: 0px;
+  margin: 6px;
+  height: 33px;
+  width: 70px;
+  line-height: inherit;
+}
+.cm-white-button {
+  background-color: #ffffff;
+  width: 103px;
+  margin: 0;
+}
+.cm-close-btn {
+  color: #ffffffaa;
+}
+.cm-close-btn:hover, .cm-close-btn:focus {
+  color: #ffffff;
+}
+/* Custom Navigation
+ ========================================================================== */
+ .cm-navigation {
+border-bottom: 5px solid #05007A;
+position:relative;
+color: #fff;
+padding-top: 0px;
+padding-bottom:0px;
+background:rgba(255,255,255, 0.0);
+/*background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), url(/images/toolbar_bg.png);*/
+
+}
+.cm-navigation .forimage {
+background:rgba(255,255,255, 0.4);
+}
+
+.uk-section-overlap {
+  /*margin-top:-40px!important;*/
+}
+.uk-sticky{
+}
+
+.tm-header .uk-navbar-left {position:relative;z-index:9999!important;}
+.tm-header .uk-logo {padding: 5px 10px 10px 10px; position:relative;z-index:1000!important;}
+.tm-header .uk-navbar-transparent{
+  /* background:rgba(255,255,255, 0.7);*/
+  padding-top:4px;
+}
+.cm-navigation .uk-container {
+  padding-right:0px;
+}
+
+.cm-navigation ul.uk-subnav.uk-subnav-line{
+  background-color: #05007A;
+  padding-top:0px;
+  transform: skew(25deg);
+  padding-right:0px;
+  margin-right:10px;
+  padding-left:0px;
+}
+
+.cm-navigation .uk-subnav-line li {
+  /*transition: background 0.2s;*/
+  /*  display:inline-block;*/
+  font-family:Roboto!important;
+  font-weight:900!important;
+  text-transform:uppercase!important;
+  font-size:12px!important;
+  opacity:1!important;
+  display:inline-block;
+}
+.cm-navigation .uk-subnav-line > :before {
+    content: none;
+    display: block;
+    /* display: inline-block*/
+    height: 10px;
+    vertical-align: middle
+}
+
+.uk-subnav-line > :nth-child(n + 2):before {
+    margin-right: 10px;
+    border-left: 0px ;
+}
+
+.cm-navigation .uk-subnav-line li  a{
+  display: block;
+  text-decoration:none;
+  transform: skew(-25deg); 
+  font-family:Roboto:900!important;
+  text-transform:uppercase!important;
+  font-size:13px!important;
+  opacity:1!important;
+  color:#05007A!important;
+ 
+}
+.cm-navigation .uk-subnav-line li:hover {
+  color:#05007A!important;
+  background:#fff;
+  display: block;
+}
+
+
+
+.cm-navigation .uk-subnav-line li a:hover, 
+.cm-navigation .uk-subnav-line li:hover a{
+  display: block;
+  color:#05007A!important;
+}
+
+.cm-navigation  .uk-dotnav, .cm-navigation .uk-subnav {
+  margin-bottom:0px!important;
+}
+.cm-nav-container {
+  width: 100%;
+  border-style: solid;
+  border-width: 0px 0px 5px 0px;
+  border-bottom-color: #ffc800 !important;
+  box-shadow: 0px 10px 16px 0px #fff3d1;
+}
+.cm-left-box {
+  background-color: #ffc800;
+  padding: 10px 89px 10px 41px;
+}
+.cm-nav-toolbar {
+  border-width: 0px 0px 0px 0px;
+}
+.cm-nav-toolbar ul.uk-subnav.uk-subnav-line {
+    background-color: #ffc800 !important;
+}
+/*.cm-navigation .uk-subnav-line .cm-nav-li {
+  color: #05007A !important;
+  background: #fff;
+  display: block;
+}*/
+.cm-nav-li {
+  padding: 0;
+  background-color: #ffc800 !important;
+}
+.cm-nav-li:hover {
+  background-color: #fff !important;
+}
+.cm-nav-li:hover  {
+  background-color: #fff !important;
+}
+.cm-nav-li a {
+  padding: 0;
+}
+.cm-nav-number-container {
+  margin-left: -1px;
+  padding: 8px 13px 3px 40px;
+  background-color: #ffc800;
+  transform: skew(25deg);
+  display: inline-block;
+  color: #05007A;
+}
+.cm-nav-li-number {
+  padding: 5px 15px 5px 25px;
+}
+.cm-nav-number {
+  font-size: x-large;
+  font-weight: bold;
+  display: inline-block;
+  line-height: 1.5;
+  transform: skew(-25deg);
+}
+.cm-nav-title {
+  display: inline-block;
+  padding: 0px 20px 0px 20px;
+  line-height: 1.4;
+}
+.cm-nav-active {
+  background-color: #fff !important;
+}
+.cm-nav-active .cm-nav-title {
+  color: #05007A !important;
+}
+.cm-nav-disabled,
+.cm-nav-disabled:hover,
+.cm-nav-disabled .cm-nav-number-container {
+  background-color: #fce39a !important;
+  color: #91919d;
+  cursor: default;
+}
+.cm-nav-disabled a {
+  cursor: default;
+}
+.cm-nav-disabled span.cm-nav-title {
+  color: #91919d;
+}
+/* Custom File drop Area Upload
+ ========================================================================== */
+.cm-file-drop-area {
+  background-color: #fef4d7;
+  border: 1px dashed #f9c735;
+  font-weight: 500;
+}
+/* Custom Inputs
+ ========================================================================== */
+#initial-type-input {
+  border: 2px solid #f9c735;
+  font-weight: bold !important;
+  padding: 28px;
+  border-radius: 3px;
+  font: inherit;
+}
+.cm-text-input:-ms-input-placeholder {
+  color: #aaa !important;
+}
+.cm-text-input::-moz-placeholder {
+  color: #aaa;
+  opacity: 1;
+}
+.cm-text-input::-webkit-input-placeholder {
+  color: #aaa;
+}
+
+/* Custom Table
+ ========================================================================== */
+.cm-table {
+  border-collapse: collapse;
+  /*border-radius: 3px;*/
+  border-style: hidden; /* hide standard table (collapsed) border */
+  box-shadow: 0 0 0 1px #f7c800; /* this draws the table border  */ 
+}
+.cm-table td, .cm-table th {
+  padding: 16px 20px;
+  -webkit-transition: color .1s linear;
+  transition: color .1s linear;
+}
+.cm-table td.code, .cm-table td.acknowl, .cm-table td.delete, .cm-table td.edit, .cm-table-footer {
+  border-top: 1px solid #e8e8e8;
+  font-weight: 400;
+}
+.cm-table td.code:hover, .cm-table td.acknowl:hover, .cm-table td.edit:hover a {
+  color: #55546d;
+  cursor: pointer;
+}
+.cm-table thead tr {
+  background-color: #fef4d7;
+}
+.cm-table tr th {
+  color: #5b6065;
+  font-weight: bold;
+}
+.cm-table-number {
+  background-color: #fbe39a;
+  border-right: 1px solid #f7c800;
+}
+.empty:before {
+  content: "Empty field";
+  color: #ccc;
+}
+.cm-tooltip {
+  width: 15px;
+  display: inline-flex;
+}
+/* Custom config section
+ ========================================================================== */
+.cm-config-settings-section {
+  /*overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  height: 841px;*/
+  max-width: 850px !important;
+  min-width: 460px !important;
+  width: 35% !important;
+}
+.cm-config-section {
+  
+}
+.cm-easy-config-section {
+  padding: 20px;
+}
+.cm-config-options-container {
+  display: block;
+  margin-top: -10px;
+}
+.cm-config-options-connect-line {
+  margin: auto;
+  display: block;
+  position: relative;
+  top: 29px;
+  background-color: #ececec;
+  z-index: -1;
+  width: 70%;
+  height: 8px;
+  box-shadow: 0px 2px 0px #dedede;
+  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#72bbd6+0,617dd3+50,5243a7+100 */
+  background: #72bbd6; /* Old browsers */
+  background: -moz-linear-gradient(left, #72bbd6 0%, #617dd3 50%, #5243a7 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(left, #72bbd6 0%,#617dd3 50%,#5243a7 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to right, #72bbd6 0%,#617dd3 50%,#5243a7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72bbd6', endColorstr='#5243a7',GradientType=1 ); /* IE6-9 */
+}
+.cm-config-option {
+  display: block;
+}
+/*.cm-config-light .cm-circle-button {
+  background-color: #58bd87;
+}
+.cm-config-medium .cm-circle-button {
+  background-color: #269487;
+}
+.cm-config-hard .cm-circle-button {
+  background-color: #324b7f;
+}
+.cm-config-advance .cm-circle-button {
+  background-color: #161264;
+}*/
+.cm-config-light .cm-circle-button, .cm-config-option:hover.cm-config-light .cm-outer-circle-button, .cm-config-option.cm-config-light.active .cm-outer-circle-button {
+  background-color: #72bbd6;
+}
+.cm-config-medium .cm-circle-button, .cm-config-option:hover.cm-config-medium .cm-outer-circle-button, .cm-config-option.cm-config-medium.active .cm-outer-circle-button {
+  background-color: #617dd3;
+}
+.cm-config-hard .cm-circle-button, .cm-config-option:hover.cm-config-hard .cm-outer-circle-button, .cm-config-option.cm-config-hard.active .cm-outer-circle-button {
+  background-color: #5243a7;
+}
+.cm-config-advance .cm-circle-button, .cm-config-option:hover.cm-config-advance .cm-outer-circle-button, .cm-config-option.cm-config-advance.active .cm-outer-circle-button {
+  background-color: #161264;
+}
+.cm-config-option:hover .cm-circle-button, .cm-config-option.active .cm-circle-button {
+  background-color: #efefef;
+}
+/*.cm-config-option:hover .cm-circle-button-fill, .cm-config-option.active .cm-circle-button-fill {
+  background-color: rgba(255, 255, 255, 0.39);
+}*/
+.cm-outer-circle-button {
+  background-color: transparent;
+  margin: 0 auto;
+  height: 50px;
+  width: 50px;
+  border-radius: 45px;
+  position: relative;
+  -webkit-transition: .1s ease-in-out;
+  transition: .1s ease-in-out;
+}
+.cm-circle-button {
+  height: 30px;
+  width: 30px;
+  top: 10px;
+  left: 10px;
+  border-radius: 45px;
+  position: absolute;
+  -webkit-transition: .1s ease-in-out;
+  transition: .1s ease-in-out;
+}
+.cm-circle-button-fill {
+  width: 16px;
+  height: 16px;
+  border-radius: 45px;
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  background-color: #efefef;
+}
+.cm-config-option span {
+  font-weight: normal;
+  font-family: Roboto;
+  text-transform: uppercase;
+  vertical-align: middle;
+  font-size: 13px;
+  text-align: center;
+  -webkit-transition: .1s ease-in-out;
+  transition: .1s ease-in-out;
+  color: #c7c6c6;
+}
+.cm-config-option:hover span, .cm-config-option.active span {
+  color: #565656;
+  text-decoration: none;
+}
+.cm-config-option-check {
+  display: none;
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  color: black;
+}
+.cm-config-option.active .cm-config-option-check {
+  display: block;
+}
+.cm-advanced-tools-section {
+  padding: 0px 20px 20px 20px;
+  min-height: 296px;
+}
+.cm-advanced-tools-section .uk-accordion-title {
+  font-size: 16px;
+}
+.cm-advaned-tools-label {
+  line-height: 1.4;
+  font-size: 18px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+/*.cm-prhases {
+  min-width: 350px !important;
+  margin-top: 40px !important;
+}*/
+.cm-phrases-container {
+  border-collapse: collapse;
+  border-radius: 3px;
+  border-style: hidden; /* hide standard table (collapsed) border */
+  box-shadow: 0 0 0 1px #f7c800; /* this draws the table border  */ 
+}
+.cm-phrases-container header {
+  background-color: #fafafa;
+  color: #5b6065;
+  font-weight: bold;
+  border-bottom: 1px solid #e8e8e8;
+}
+.cm-phrases-container ul {
+  height: 180px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin: 0;
+}
+.cm-phrases-container ul li {
+  padding: 0;
+  border: none;
+}
+.cm-number-space, .cm-phrases-container ul li .num {
+  background-color: #fafafa;
+  border-right: 1px solid #e8e8e8;
+  width: 40px;
+  padding: 12px 0px;
+  font-size: 14px;
+}
+.cm-text-input-phrase, .cm-text-input-weight {
+  height: 34px;
+  border: 1px solid #f7c800;
+  font-weight: bold !important;
+  text-indent: 8px;
+  border-radius: 5px;
+  font: inherit;
+  margin: 5px 0px 5px 5px;
+}
+.cm-text-input-weight {
+  width: 80px;
+}
+.cm-phrases-container .weight {
+  width: 95px;
+}
+.cm-phrases-container footer {
+  padding: 6px 6px 6px 20px;
+}
+.cm-phrases-container footer.positive {
+  background-color: #c0ff94;
+}
+.cm-phrases-container footer.negative {
+  background-color: #ffbfc9;
+}
+.cm-phrases-container ul li:hover {
+  background: #ffd;
+}
+.cm-phrases-container ul li .phrase, .cm-phrases-container ul li .weight {
+  padding: 6px 0px 6px 13px;
+  line-height: 1.5;
+  border-bottom: 1px solid #e8e8e8;
+  font-weight: 400;
+}
+.cm-phrases-container ul li .phrase:hover, .cm-phrases-container ul li .weight:hover {
+  color: #00a0de;
+  text-decoration: underline;
+  cursor: default;
+}
+.cm-phrases-container ul li .erase {
+  width: 55px;
+  border-bottom: 1px solid #e8e8e8;
+}
+.cm-match-area {
+  padding: 7px;
+  border: 1px solid #f7c800;
+  margin-top: -1px;
+}
+.cm-match-area.left, .cm-match-area.right {
+  background-color: #ffff94;
+}
+.cm-match-area.middle {
+ background-color: #bedfff;
+}
+
+/* Custom Results Section
+ ========================================================================== */
+.cm-results-section {
+  background-color: rgb(242, 242, 242);
+  min-height: 700px;
+  position: relative;
+  border-bottom: 1px solid #f7c800;
+  border-left: 1px solid #f7c800;
+}
+.cm-results-section header {
+  padding: 0;
+  -webkit-transition: box-shadow 500ms;
+  transition: box-shadow 500ms;
+}
+.cm-results-section header.uk-sticky-fixed {
+  background-color: transparent !important;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 0px;
+}
+.cm-results-controls {
+  padding: 40px 20px 20px 20px;
+}
+header.uk-sticky-fixed .cm-results-controls {
+  background-color: rgb(242, 242, 242) !important;
+  padding: 20px;
+}
+.cm-results-count-section {
+  padding: 5px 20px 20px 20px;
+}
+header.uk-sticky-fixed .cm-results-count-section {
+  background-color: rgba(245, 245, 245, 0.8) !important;
+  padding: 5px 20px 5px 20px;
+}
+.cm-text-muted {
+  color: #737373 !important;
+}
+.cm-results-rows {
+  /*overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  height: 600px;*/
+  padding: 0px 20px 40px 20px;
+}
+.cm-results-rows .match {
+  font-weight: bold;
+  color: #336699;
+}
+.cm-document-result {
+  margin-top: 5px;
+}
+.cm-document-result .textwindow {
+  background-color: #ffff94;
+  color: #555;
+}
+.cm-document-result .highlight {
+  font-weight: bold;
+  background-color: #bedfff;
+  padding: 2px 8px;
+  color: #222;
+}
+.cm-document-result .negative {
+  background-color: #ffbfc9;
+}
+.cm-document-result .positive {
+  background-color: #c0ff94;
+}
+.cm-results-hide-pannel {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.cm-header-hide-pannel {
+  display: none;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.uk-sticky-fixed .cm-header-hide-pannel.cm-header-shown {
+  display: block;
+}
+.cm-save-profile-step {
+  /*position: absolute;
+  bottom: -60px;
+  right: 0;*/
+  line-height: 38px;
+}
+/* Custom Docs selection form
+ ========================================================================== */
+.cm-docs-selection-form {
+  margin: 0 auto;
+  display: block;
+  position: relative;
+  z-index: 1020;
+  box-sizing: border-box;
+  min-width: 500px;
+  padding: 35px;
+  background: #fff;
+  color: #767779;
+  border-radius: 2px;
+  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
+}
+.cm-docs-selection-form-dialog {
+  min-width: 700px;
+}
+/* Custom labels
+ ========================================================================== */
+.cm-label {
+  display: inline-block;
+  padding: 1px 7px;
+  background: #8688a5;
+  line-height: 1.625;
+  font-size: 12px;
+  color: #fff;
+  vertical-align: middle;
+  white-space: nowrap;
+  font-family: Roboto;
+  font-weight: normal;
+  text-transform: uppercase;
+  border-radius: 2px;
+  margin-right: 5px;
+}
+/* Custom text
+ ========================================================================== */
+.cm-coloured-text {
+  color: #64667f;
+}
+
+#parent {
+  position: relative;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: start;
+  -webkit-align-items: start;
+  align-items: start;
+  margin-bottom: 64px;
+}
+#child1 {
+  padding-top: 20px;
+  -webkit-flex: 0.35;
+  flex: 0.35;
+  will-change: min-height;
+}
+#child1.is-affixed {
+  padding-top: 0px;
+}
+#child1-inner {
+  transform: translate(0, 0); /* For browsers don't support translate3d. */
+  transform: translate3d(0, 0, 0);
+  will-change: position, transform;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #f7c800;
+  border-right: 1px solid #f7c800;
+  margin-right: -1px;
+  min-height: 640px;
+}
+#child2 {
+  position: relative;
+  -webkit-flex: 1;
+  flex: 1;
+  right: 0;
 }
\ No newline at end of file
diff --git a/interactive-mining-madoap/madoap/src/static/upload-codes.js b/interactive-mining-madoap/madoap/src/static/upload-codes.js
index 772f79a..a037bb2 100644
--- a/interactive-mining-madoap/madoap/src/static/upload-codes.js
+++ b/interactive-mining-madoap/madoap/src/static/upload-codes.js
@@ -51,11 +51,10 @@
     }
 
     var handleAddRowButton = function() {
-        $('#add-row-below').on('click', function( e ) {
+        $('#add-row-below').on('focus', function( e ) {
             var newId = generateId();
             addDataToTable(newId, "", "");
-            var currentEle = $('#'+ newId).find("td.code");
-            editValue(currentEle, " ", 0);
+            $('#'+ newId).find("td.code").trigger("click");
         });
     }
 
@@ -74,8 +73,14 @@
                     window.location="configure-profile"
                 },
                 error: function (xhr, ajaxOptions, thrownError) {
-                  $('#file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
+                  $('#file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.responseText)
                   // $('#file-uploaded')[0].checked = false;
+                  UIkit.notification({
+                    message: xhr.responseText,
+                    status: 'danger',
+                    pos: 'top-center',
+                    timeout: 0
+                  });
                 },
                 cache: false,
                 contentType: false,
@@ -100,35 +105,87 @@
 
     var clickedElement=null;
     var saveEditBox = function(element) {
-        var new_val = $(".thVal").val();
-        $(element).html($(".thVal").val().trim());
+        codeElement = element.find(".code");
+        ackowElement = element.find(".acknowl");
+        codeElement2 = element.find(".code .thVal");
+        ackowElement2 = element.find(".acknowl .thVal");
+        var codeValue2 = codeElement2.val().trim();
+        var ackowValue2 = ackowElement2.val().trim();
+        $(codeElement).html(codeValue2);
+        $(ackowElement).html(ackowValue2);
+        if (codeValue2 == "") {
+          codeElement.addClass("empty");
+        }
+        if (ackowValue2 == "") {
+          ackowElement.addClass("empty");
+        }
     }
 
-    var editValue = function(currentEle, value, isArea) {
+    var editValue = function(currentEle, target) {
         clickedElement = currentEle;
+        // Locate code ande acknow
+        codeElement = currentEle.find(".code");
+        ackowElement = currentEle.find(".acknowl");
+        // remove empty class if any
+        codeElement.removeClass("empty");
+        ackowElement.removeClass("empty");
         $(document).off('click');
-        if (isArea) {
-            $(currentEle).html('<input class="uk-textarea thVal" style="word-break: break-word; width:100%" type="text" value="' + value + '" />');
+        // get elements lines number
+        var divHeight = ackowElement.outerHeight(true);
+        var lineHeight = parseInt(ackowElement.css('line-height'));
+        var lines = divHeight / lineHeight;
+
+        var codeValue = codeElement.html();
+        input1 = $('<input style="width:100%" class="thVal" type="text" value="" />');
+        input1.val(codeValue);
+        $(codeElement).html(input1);
+
+
+        var ackowValue = ackowElement.html();
+        input2 = $('<textarea class="uk-textarea thVal" rows="'+lines+'" style="word-break: break-word; width:100%" type="text" value="" />');
+        input2.val(ackowValue);
+        $(ackowElement).html(input2);
+
+
+        if (target === "code") {
+          $(".code .thVal").focus();
         } else {
-            $(currentEle).html('<input style="width:100%" class="thVal" type="text" value="' + value + '" />');
+          $(".acknowl .thVal").focus();
         }
-        $(".thVal").focus();
         $(".thVal").keyup(function (event) {
             // Handle Enter key
             if (event.keyCode == 13) {
-              var new_val = $(".thVal").val();
-              $(currentEle).html($(".thVal").val().trim());
+              var parent = $(".thVal").parent().parent();
+              codeElement2 = parent.find(".code .thVal");
+              ackowElement2 = parent.find(".acknowl .thVal");
+              var codeValue2 = codeElement2.val().trim();
+              var ackowValue2 = ackowElement2.val().trim();
+              $(codeElement).html(codeValue2);
+              $(ackowElement).html(ackowValue2);
+              if (codeValue2 == "") {
+                codeElement.addClass("empty");
+              }
+              if (ackowValue2 == "") {
+                ackowElement.addClass("empty");
+              }
               clickedElement = null;
             }
             // Handle Esc key
             else if (event.keyCode == 27) {
-              $(currentEle).html(value);
+              $(codeElement).html(codeValue);
+              $(ackowElement).html(ackowValue);
+              if (codeValue == "") {
+                codeElement.addClass("empty");
+              }
+              if (ackowValue == "") {
+                ackowElement.addClass("empty");
+              }
               clickedElement = null;
             }
         });
         // Handle clicks outside editboxes
         $(document).click(function (event) {
-            if($(event.target).attr('class')!="thVal") {
+            if($(event.target).hasClass('thVal')===false) {
               saveEditBox(currentEle);
               $(document).off('click');
               clickedElement = null;
@@ -139,14 +196,14 @@
     // a fucntion to catch double click on positive and negative phrases edit boxes
     var addDoubleClick = function(element){
         $(element).click(function (event) {
-          if($(event.target).attr('class')!="thVal") {
+          console.log($(event.target));
+          if($(event.target).hasClass('thVal')===false) {
               event.stopPropagation();
               // save previous clicked box
               if (clickedElement)
                 saveEditBox(clickedElement);
-              var currentEle = $(this);
-              var value = $(this).html();
-              editValue(currentEle, value, currentEle.hasClass("acknowl")?1:0);
+              var currentEle = $(this).parent();
+              editValue(currentEle, $(event.target).hasClass('code')?"code":$(event.target).hasClass('acknowl')?"acknowl":"code");
           }
         });
     }
@@ -167,24 +224,32 @@
                 $(v).find("td.num").text(count_table_rows);
                 count_table_rows++;
               })
+              if (count_table_rows === 1) {
+                $('#next-button').attr('disabled', 'disabled').addClass('disabled');
+              }
            });
     };
 
     var count_table_rows = 1;
 
     var addDataToTable = function(id, code, acknowledgment) {
-        var row = '<tr id="' + id + '"><td class="num">'+count_table_rows+'</td><td class="code">' + code + '</td><td class="acknowl">' + acknowledgment +'</td></tr>'
+      // <td class="num cm-table-number">'+count_table_rows+'</td>
+        var row = '<tr id="' + id + '"><td class="code '+(code===''?'empty':'')+'">' + code + '</td><td class="acknowl '+(acknowledgment===''?'empty':'')+'">' + acknowledgment +'</td></tr>'
         table = $('#data-table tbody');
 
         // if content is correct and not empty append to table
         $('#data-table tbody').append(row);
 
         count_table_rows++;
+        if (count_table_rows != 1) {
+          $("#next-button").removeAttr('disabled').removeClass('disabled');
+        }
 
         // add all the item's extra functionality
         var createdItem = $('#'+ id);
         // delete button
-        createdItem.append($('<td />').append($('<a />', {
+        createdItem.append($('<td />', {"class":"edit"}).append($('<a />', {"class":"uk-icon-link", "uk-icon":"icon: pencil", "contenteditable" : "false"})));
+        createdItem.append($('<td />', {"class":"delete"}).append($('<a />', {
                                "class" :"uk-icon-link",
                                "uk-icon" : "icon: trash",
                                "contenteditable" : "false",
@@ -197,6 +262,7 @@
                   })));
         addDoubleClick($(createdItem).find("td.code"));
         addDoubleClick($(createdItem).find("td.acknowl"));
+        addDoubleClick($(createdItem).find("td.edit"));
         createdItem.on('keydown', function(ev){
             if(ev.keyCode === 13) return false;
         });
@@ -219,9 +285,19 @@
                 type: 'POST',
                 data: formData,
                 async: false,
+                cache: false,
+                contentType: false,
+                processData: false,
                 success: function (data) {
                     // TODO check for error
                     $('#codes-file-upload-response').html(JSON.parse(data).respond)
+                    respond = JSON && JSON.parse(data).respond || $.parseJSON(data).respond;
+                    UIkit.notification({
+                      message: respond,
+                      status: 'success',
+                      pos: 'top-center',
+                      timeout: 5000
+                    });
                     obj = JSON && JSON.parse(data).data || $.parseJSON(data).data;
                     // console.log(obj);
                     for (var key1 in obj) {
@@ -232,16 +308,79 @@
                     triggerDataTable();
                 },
                 error: function (xhr, ajaxOptions, thrownError) {
-                  $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
+                  $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.responseText)
                   // $('#file-uploaded')[0].checked = false;
-                },
-                cache: false,
-                contentType: false,
-                processData: false
+                  UIkit.notification({
+                    message: xhr.responseText,
+                    status: 'danger',
+                    pos: 'top-center',
+                    timeout: 0
+                  });
+                }
             });
+            $("#codes-file-input")[0].value = "";
 
             return false;
         });
+
+        var bar = document.getElementById('js-progressbar');
+        UIkit.upload('.js-upload', {
+            url: 'upload-codes',
+            multiple: false,
+            name: 'upload',
+            loadStart: function (e) {
+                bar.removeAttribute('hidden');
+                bar.max = e.total;
+                bar.value = e.loaded;
+            },
+            progress: function (e) {
+                bar.max = e.total;
+                bar.value = e.loaded;
+            },
+            loadEnd: function (e) {
+                bar.max = e.total;
+                bar.value = e.loaded;
+            },
+            completeAll: function (data) {
+                console.log(data.responseText);
+                setTimeout(function () {
+                    bar.setAttribute('hidden', 'hidden');
+                }, 1000);
+                $('#codes-file-upload-response').html(JSON.parse(data.responseText).respond)
+                respond = JSON && JSON.parse(data.responseText).respond || $.parseJSON(data.responseText).respond;
+                obj = JSON && JSON.parse(data.responseText).data || $.parseJSON(data.responseText).data;
+                // console.log(obj);
+                // clear already inserted data
+                $('#data-table tbody').empty();
+                count_table_rows = 1;
+                // add newly added data
+                var dataCounter = 0;
+                for (var key1 in obj) {
+                    if (obj.hasOwnProperty(key1)) {
+                      addDataToTable(generateId(), key1, obj[key1]);
+                      dataCounter++;
+                    }
+                }
+                UIkit.notification({
+                  message: '<b>'+dataCounter+' Codes</b> loaded successfully!',
+                  status: 'success',
+                  pos: 'top-center',
+                  timeout: 5000
+                });
+                triggerDataTable();
+            },
+            error: function (xhr, ajaxOptions, thrownError) {
+              $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.responseText)
+                // $('#file-uploaded')[0].checked = false;
+              UIkit.notification({
+                message: xhr.responseText,
+                status: 'danger',
+                pos: 'top-center',
+                timeout: 0
+              });
+            }
+        });
+
     }
 
     var checkAlreadyUserState = function() {
@@ -264,11 +403,19 @@
               }
               if (numOfCodes != 0) {
                 triggerDataTable();
+              } else {
+                localStorage.clear();
               }
           },
           error: function (xhr, ajaxOptions, thrownError) {
-            $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.status)
+            $('#codes-file-upload-response').html('<b style=\"color: red\">File Failed to Upload!</b>'+xhr.responseText)
             // $('#file-uploaded')[0].checked = false;
+            UIkit.notification({
+              message: xhr.responseText,
+              status: 'danger',
+              pos: 'top-center',
+              timeout: 0
+            });
           },
           cache: false,
           contentType: false,
diff --git a/interactive-mining-madoap/madoap/src/templates/base_v2.html b/interactive-mining-madoap/madoap/src/templates/base_v2.html
index c34a9cf..80395f8 100644
--- a/interactive-mining-madoap/madoap/src/templates/base_v2.html
+++ b/interactive-mining-madoap/madoap/src/templates/base_v2.html
@@ -15,6 +15,8 @@
   <link rel="stylesheet" href="{{ static_url("dl119_files/custom.css") }}">
   <link rel="stylesheet" href="{{ static_url("custom.css") }}">
   <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
+  <script src="{{ static_url("ResizeSensor.js") }}" type="text/javascript"></script>
+  <script src="{{ static_url("jquery.sticky-sidebar.js") }}" type="text/javascript"></script>
   <script src="{{ static_url("dl119_files/uikit.js") }}"></script>
   <script src="{{ static_url("dl119_files/uikit-icons-max.js") }}"></script>
          <!-- Google sitename markup-->
@@ -79,7 +81,7 @@
                 </div>
                 <div class="uk-navbar-center">
                   <a class="uk-logo uk-navbar-item" routerlink="/search/find" routerlinkactive="router-link-active" href="/search/find">
-                    <img alt="OpenAIRE" class="uk-responsive-height" src="/static/OA DISCOVER_B.png">
+                    <img alt="OpenAIRE" class="uk-responsive-height" src="/static/OA CONNECT_B.png">
                   </a>
                 </div>
                 <div class="uk-navbar-right">
@@ -100,7 +102,7 @@
                 </div>
              </div>
           </div>
-          <div class="tm-toolbar custom-discover-toolbar uk-visible@m">
+          <div class="tm-toolbar custom-connect-toolbar uk-visible@m">
              <div class="uk-container uk-flex uk-flex-middle uk-container-expand">
                 <div class="uk-margin-auto-left">
                    <div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack" uk-grid="margin: uk-margin-small-top">
@@ -108,9 +110,9 @@
                          <div class="uk-panel inner" id="module-119">
                             <ul class="uk-subnav uk-subnav-line">
                                <li class="uk-active"><a href="http://dl119.madgik.di.uoa.gr/"><img alt="home" class="uk-responsive-height" src="/static/dl119_files/Home-icon.png"></a></li>
-                               <li class="custom-discover-li"><a routerlink="/search/find" routerlinkactive="router-link-active" href="/search/find" class="router-link-active">Discover/Share</a></li>
+                               <li><a href="#">Discover/Share</a></li>
                                <li><a href="#">Join</a></li>
-                               <li><a href="#">Connect</a></li>
+                               <li class="custom-connect-li"><a class="router-link-active" href="#">Connect</a></li>
                                <li><a href="#">Monitor_</a></li>
                                <li><a href="#">Develop</a></li>
                             </ul>
@@ -126,11 +128,11 @@
                    <nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">
                       <div class="uk-navbar-left  uk-visible@l  ">
                          <a class="uk-logo uk-navbar-item router-link-active" routerlink="/search/find" routerlinkactive="router-link-active" href="/search/find">
-                         <img alt="OpenAIRE" class="uk-responsive-height" src="/static/OA DISCOVER_B.png"></a>
+                         <img alt="OpenAIRE" class="uk-responsive-height" src="/static/OA CONNECT_B.png"></a>
                       </div>
                       <div class="uk-navbar-left  uk-visible@m uk-hidden@l">
                          <a class="uk-logo uk-navbar-item router-link-active" routerlink="/search/find" routerlinkactive="router-link-active" href="/search/find">
-                         <img alt="OpenAIRE" class="uk-responsive-height" src="/static/OA DISCOVER_A.png"></a>
+                         <img alt="OpenAIRE" class="uk-responsive-height" src="/static/OA CONNECT_A.png"></a>
                       </div>
                       <div class="uk-navbar-right">
                          <user-mini>
@@ -155,16 +157,16 @@
           <div></div>
         </navbar>
 
-        <div _ngcontent-dc20-1="" class=" uk-section  uk-margin-large-top tm-middle custom-main-content" id="tm-main">
-          <div _ngcontent-dc20-1="" class="uk-container uk-container-expand">
+        <div _ngcontent-dc20-1="" class=" uk-section uk-margin-large-top tm-middle custom-main-content" id="tm-main">
+          <!-- <div _ngcontent-dc20-1="" class="uk-container uk-container-expand">
             <div _ngcontent-dc20-1="" uk-grid="">
-              <div _ngcontent-dc20-1="" class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
+              <div _ngcontent-dc20-1="" class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first "> -->
                 <main _ngcontent-dc20-1="">
                   {% block content %}{% end %}
                 </main>
-              </div>
+              <!-- </div>
             </div>
-          </div>
+          </div> -->
         </div>
 
         <cookie-law _ngcontent-dc20-1="" position="bottom" _nghost-dc20-4="" seen="true">
diff --git a/interactive-mining-madoap/madoap/src/templates/configure_profile.html b/interactive-mining-madoap/madoap/src/templates/configure_profile.html
index 8db2f3d..aadf1b7 100644
--- a/interactive-mining-madoap/madoap/src/templates/configure_profile.html
+++ b/interactive-mining-madoap/madoap/src/templates/configure_profile.html
@@ -4,206 +4,265 @@
 <title>Configure profile</title>
 <link rel="stylesheet" href="/static/animations.css"/>
 
-<a href="/"><button id="cancel-main-btn" class="uk-close-large" type="button" uk-close></button></a>
-<div class="uk-container tm-toolbar custom-discover-toolbar uk-visible@m uk-container-small">
-    <div class="uk-flex uk-flex-middle">
-        <div class="uk-margin-auto-right">
-            <div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack" uk-grid="margin: uk-margin-small-top">
-                <div class="uk-first-column">
-                    <ul class="uk-subnav uk-subnav-line">
-                        <li><a href="upload-codes">Upload your project codes</a></li>
-                        <li class="custom-discover-li"><a class="router-link-active" href="configure-profile">Configure the matching proccess</a></li>
-                        <li><a id="save-profile-option">Save matching profile</a></li>
-                    </ul>
+<div class="uk-flex-inline cm-nav-container">
+    <div class="cm-left-box"><a href="/"><button id="cancel-main-btn" class="uk-close-large" type="button" uk-close></button></a></div>
+    <div class="cm-navigation cm-nav-toolbar">
+        <ul class="uk-subnav uk-subnav-line">
+            <li class="cm-nav-li">
+                <a class="cm-nav-a" href="upload-codes">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">1</span></div>
+                    <span class="cm-nav-title uk-text-middle">Upload your<br>project codes</span>
+                </a>
+            </li>
+            <li class="cm-nav-li cm-nav-active">
+                <a class="cm-nav-a">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">2</span></div>
+                    <span class="cm-nav-title uk-text-middle">Configure the<br>matching proccess</span>
+                </a>
+            </li>
+            <li class="cm-nav-li">
+                <a class="cm-nav-a" href="save-profile" id="save-profile-option">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">3</span></div>
+                    <span class="cm-nav-title uk-text-middle">Save your<br>matching profile</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
+    <div class="uk-width-large cm-config-settings-section">
+        <div class="cm-easy-config-section">
+            <h4>Matching mode <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
+            <div class="cm-config-options-container">
+                <div class="cm-config-options-connect-line"></div>
+                <div class="uk-child-width-expand@s uk-text-center" uk-grid>
+                    <div>
+                        <a class="cm-config-option cm-config-light" id="1-level">
+                            <div class="cm-circle-button">
+                                <div class="cm-circle-button-fill"></div>
+                            </div>
+                            <span>Light</span>
+                        </a>
+                    </div>
+                    <div>
+                        <a class="cm-config-option cm-config-medium" id="2-level">
+                            <div class="cm-circle-button">
+                                <div class="cm-circle-button-fill"></div>
+                            </div>
+                            <span>Medium</span>
+                        </a>
+                    </div>
+                    <div>
+                        <a class="cm-config-option cm-config-hard" id="3-level">
+                            <div class="cm-circle-button">
+                                <div class="cm-circle-button-fill"></div>
+                            </div>
+                            <span>Hard</span>
+                        </a>
+                    </div>
+                    <div>
+                        <a class="cm-config-option cm-config-advance" id="c-level">
+                            <div class="cm-circle-button">
+                                <div class="cm-circle-button-fill"></div>
+                            </div>
+                            <span>Advanced</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr>
+        <div class="cm-advanced-tools-section">
+            <label class="uk-form-label cm-advaned-tools-label" for="advaned-tools-label"><input id="advaned-tools-label" class="uk-checkbox" type="checkbox"> Show advanced tools <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
+            <div id="advaned-tools">
+                <div class="uk-accordion-content">
+                    <div class="uk-grid-small uk-child-width-expand@s" uk-grid>
+                        <div class="cm-prhases">
+                            <h5>Positive phrases <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
+                            <div class="cm-phrases-container">
+                                <header>
+                                    <form id="word-form-pos" class="uk-grid-collapse uk-child-width-expand@s uk-text-center" uk-grid>
+                                        <div class="cm-number-space uk-width-1-5@m">#</div>
+                                        <input class="uk-width-expand uk-text-left cm-text-input cm-text-input-phrase" type="text" id="text-pos" placeholder="Phrase"/>
+                                        <input class="uk-width-1-5@m uk-text-left cm-text-input cm-text-input-weight" type="number" name="weight" min="0" max="100" id="weight-pos" placeholder="Weight"/>
+                                        <input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phases-button" value="Add"/>
+                                    </form>
+                                    <div class="scroll_holder">
+                                        <div class="scroller"></div>
+                                    </div>
+                                </header>
+                                <div style="position: relative;">
+                                    <div style="position: absolute; left: 0; top: 0; height: 100%; width: 40px; background-color: #f8d4c7;"></div>
+                                    <ul id="word-pos" class="uk-list uk-list-striped">
+                                    </ul>
+                                </div>
+                                <footer class="positive">
+                                    <div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
+                                        <div>
+                                            <span class="count" id="count-pos">0</span>
+                                            <span> positive word(s)</span>
+                                        </div>
+                                        <div class="uk-inline">
+                                            <button class="uk-float-right uk-button uk-button-default" disabled id="clear-all-pos">Delete All</button>
+                                        </div>
+                                    </div>
+                                </footer>
+                            </div>
+                        </div>
+                        <div class="cm-prhases">
+                            <h5>Negative phrases <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
+                            <div class="word-container">
+                                <div class="cm-phrases-container">
+                                    <header>
+                                        <form class="uk-grid-collapse uk-child-width-expand@s uk-text-center" id="word-form-neg" uk-grid>
+                                            <div class="cm-number-space uk-width-1-5@m">#</div>
+                                            <input class="uk-width-expand uk-text-left cm-text-input cm-text-input-phrase" type="text" id="text-pos" placeholder="Phrase"/>
+                                            <input class="uk-width-1-5@m uk-text-left cm-text-input cm-text-input-weight" type="number" name="weight" min="0" max="100" id="weight-pos" placeholder="Weight"/>
+                                            <input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phases-button" value="Add"/>
+                                        </form>
+                                        <div class="scroll_holder">
+                                            <div class="scroller"></div>
+                                        </div>
+                                    </header>
+                                    <div style="position: relative;">
+                                        <div style="position: absolute; left: 0; top: 0; height: 100%; width: 40px; background-color: #f8d4c7;"></div>
+                                        <ul id="word-neg" class="uk-list uk-list-striped">
+                                        </ul>
+                                    </div>
+                                    <footer class="negative">
+                                        <div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
+                                            <div>
+                                                <span class="count" id="count-neg">0</span>
+                                                <span> positive word(s)</span>
+                                            </div>
+                                            <div class="uk-inline">
+                                                <button class="uk-float-right uk-button uk-button-default" disabled id="clear-all-neg">Delete All</button>
+                                            </div>
+                                        </div>
+                                    </footer>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <h5>Acknowledgement statement proccess <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
+                    <form class="uk-form-horizontal">
+                        <div>
+                            <label class="uk-form-label" for="word-split">Length of N-grams <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
+                            <div class="uk-form-controls">
+                                <input class="uk-input" type="number" name="word-split" min="0" max="10" id="word-split" placeholder="Word pairs" value="2"/>
+                            </div>
+                        </div>
+                    </form>
+                    <h5>Matching area size <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
+                    <form class="uk-form-horizontal">
+                        <div class="cm-match-area left">
+                            <label class="uk-form-label" for="context-prev-words">Words left of the match <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
+                            <div class="uk-form-controls">
+                                <input class="uk-input" type="number" name="context-prev-words" min="0" max="20" id="context-prev-words" placeholder="Prev words number" value="10"/>
+                            </div>
+                        </div>
+                        <div class="cm-match-area middle">
+                            <label class="uk-form-label" for="context-middle-words">Matched words <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
+                            <div class="uk-form-controls">
+                                <input class="uk-input" type="number" name="context-middle-words" min="1" max="10" id="context-middle-words" placeholder="Middle words number" value="1"/>
+                            </div>
+                        </div>
+                        <div class="cm-match-area right">
+                            <label class="uk-form-label" for="context-next-words">Words right of the match <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
+                            <div class="uk-form-controls">
+                                <input class="uk-input" type="number" name="context-next-words" min="0" max="20" id="context-next-words" placeholder="Next words number" value="5"/>
+                            </div>
+                        </div>
+                    </form>
+                    <h5>Text proccess <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
+                    <form class="uk-form-stacked">
+                        <div class="uk-margin">
+                            <label class="uk-form-label" for="stop-words-filter"><input id="stop-words-filter" class="uk-checkbox" type="checkbox"> Remove stop words <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
+                        </div>
+                        <div class="uk-margin">
+                            <label class="uk-form-label" for="punctuation-filter"><input id="punctuation-filter" class="uk-checkbox" type="checkbox"> Remove punctuation <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
+                        </div>
+                    </form>
+                    <h5>Letter case <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
+                    <div class="uk-form-controls" id="letter-case-radio">
+                        <label><input class="uk-radio none" type="radio" name="letter-case" value="none" checked="checked"> As it is</label><br>
+                        <label><input class="uk-radio uppercase" type="radio" name="letter-case" value="uppercase"> UPPERCASE</label><br>
+                        <label><input class="uk-radio lowercase" type="radio" name="letter-case" value="lowercase"> lowercase</label>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+    <div>
+        <div class="cm-results-section uk-padding-medium-top">
+            <div class="uk-container uk-container-expand">
+                <div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
+                    <div>
+                        <h4>Matching results <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
+                    </div>
+                    <div id="documents-section" class="uk-inline">
+                        <div id="documents-change-btn" class="uk-float-right">
+                            <span id="docs-number" class="uk-text">0 documents uploaded</span>
+                            <span id="docs-more-btn" class="uk-margin-small-left" uk-icon="icon: more" style="display: none;"></span>
+                        </div>
+
+                    </div>
+                </div>
+                <button id="run-mining-btn" class="uk-button uk-button-primary uk-margin-top" disabled>Run mining</button>
+            </div>
+            <div id="initial-docs-upload-form" class="cm-docs-selection-form uk-container uk-container-small">
+                <h4>Load test documents <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
+                <div class="uk-container uk-container-small uk-margin-medium-top">
+                    <div class="uk-text-center">
+                        <button id="egi-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test1 documents</button>
+                        <button id="rcuk-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test2 documents</button>
+                        <button id="arxiv-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test3 documents</button>
+                    </div>
+                    <div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>
+                    <div class="js-upload uk-placeholder cm-file-drop-area">
+                        <div class="uk-flex uk-flex-middle uk-grid-collapse uk-child-width-expand@s" uk-grid>
+                            <div>
+                                <div class="cm-coloured-text">
+                                    <span uk-icon="icon: cloud-upload"></span>
+                                    <span class="uk-text-middle">Upload your documents</span>
+                                    <span class="cm-tooltip" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span>
+                                </div>
+                                <div>
+                                    <span class="cm-label">JSON</span><span class="cm-label">PDF</span><span class="cm-label">TXT</span>
+                                    <span class="uk-text uk-text-small">file types, maximum 10MB</span>
+                                </div>
+                            </div>
+                            <div uk-form-custom>
+                                <input type="file" name="upload" id="docs-file-input" class="inputfile">
+                                <button class="uk-button uk-button-default cm-main-button" type="button" tabindex="-1">Choose file</button>
+                            </div>
+                        </div>
+                    </div>
+                    <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
+                </div>
+            </div>
+            <div id="results-count" class="uk-inline uk-margin-top">
+                    <span id="results-number" class="uk-text-primary uk-margin-right"></span>
+                    <span id="results-number-previous" class="uk-text-muted"></span>
+            </div>
+            <div id="results-section" class="uk-container uk-margin-top cm-results-rows" style="display: none;">
+                <ul id="docs-results" uk-accordion="multiple: true">
+                    
+                </ul>
+            </div>
+            <div class="cm-results-hide-pannel"></div>
+        </div>
+        <div class="uk-flex uk-flex-center@m uk-flex-right@l uk-margin-top uk-margin-right ">
+            <span class="uk-text-primary uk-text-middle">Satisfied with the results?</span>
+            <button id="next-button" class="uk-button uk-button-primary uk-margin-left">Save your profile</button>
+        </div>
+    </div>
 </div>
 
-<div class="uk-section uk-section-default">
-    <div class="uk-container uk-container-expand">
-        <div class="uk-grid-collapse uk-grid-divider uk-child-width-expand@s" uk-grid>
-            <div>
-                <h4>Matching configuration<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
-                <div class="uk-section uk-section-default">
-                    <div class="uk-container">
-                        <div uk-grid>
-                            <div class="uk-width-auto@m">
-                                <ul id="uk-switcher" class="uk-tab-left" uk-tab="connect: #component-tab-left" uk-switcher="connect: + ul; animation: uk-animation-fade">
-                                    <li id="1-level"><a href="#">Light</a></li>
-                                    <li id="2-level"><a href="#">Medium</a></li>
-                                    <li id="3-level"><a href="#">Hard</a></li>
-                                    <li id="c-level"><a href="#">Custom</a></li>
-                                </ul>
-                            </div>
-                            <div class="uk-width-expand@m">
-                                <ul id="component-tab-left" class="uk-switcher">
-                                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
-                                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
-                                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <hr>
-                <ul uk-accordion id="advanced-opts-toggle">
-                    <li>
-                        <h5 class="uk-accordion-title">Advance tools <span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
-                        <div class="uk-accordion-content">
-                            <div class="uk-section uk-section-default">
-                                <div class="uk-container">
-                                    <div class="uk-grid-collapse uk-grid-divider uk-child-width-expand@s" uk-grid>
-                                        <div>
-                                            <h5>Positive phrases<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
-                                            <div class="word-container">
-                                                <header>
-                                                    <div style="width: 100%; padding: 0 0 5px 5px;">
-                                                        <div style="width: 48%; display: inline-block;">Phrase</div>
-                                                        <div style="width: 27%; display: inline-block;">Weight</div>
-                                                    </div>
-                                                    <form class="word-form" id="word-form-pos">
-                                                        <input type="text" id="text-pos" placeholder="Write a positive Word.."/>
-                                                        <input type="number" name="weight" min="0" max="100" id="weight-pos" placeholder="Weight" value="1"/>
-                                                        <input type="submit" class="btn" value="Add"/>
-                                                    </form>
-                                                    <div class="scroll_holder">
-                                                        <div class="scroller"></div>
-                                                    </div>
-                                                </header>
-                                                <table id="word-pos" class="uk-table uk-table-divider .uk-table-striped uk-table-hover">
-                                                    <tbody>
-                                                    </tbody>
-                                                </table>
-                                                <footer>
-                                                    <span class="count" id="count-pos">0</span>
-                                                    <button class="uk-button uk-button-default" disabled id="clear-all-pos">Delete All</button>
-                                                </footer>
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <h5>Negative phrases<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
-                                            <div class="word-container">
-                                                <header>
-                                                    <div style="width: 100%; padding: 0 0 5px 5px;">
-                                                        <div style="width: 48%; display: inline-block;">Phrase</div>
-                                                        <div style="width: 27%; display: inline-block;">Weight</div>
-                                                    </div>
-                                                    <form class="word-form" id="word-form-neg">
-                                                        <input type="text" id="text-neg" placeholder="Write a positive Word.."/>
-                                                        <input type="number" name="weight" min="0" max="100" id="weight-neg" placeholder="Weight" value="1"/>
-                                                        <input type="submit" class="btn" value="Add"/>
-                                                    </form>
-                                                    <div class="scroll_holder">
-                                                        <div class="scroller"></div>
-                                                    </div>
-                                                </header>
-                                                <table id="word-neg" class="uk-table uk-table-divider .uk-table-striped uk-table-hover">
-                                                    <tbody>
-                                                    </tbody>
-                                                </table>
-                                                <footer>
-                                                    <span class="count" id="count-neg">0</span>
-                                                    <button class="uk-button uk-button-default" disabled id="clear-all-neg">Delete All</button>
-                                                </footer>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <hr>
-                            <div class="uk-section uk-section-default">
-                                <div class="uk-container">
-                                    <h5>Matching area size<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
-                                </div>
-                            </div>
-                            <hr>
-                            <div class="uk-section uk-section-default">
-                                <div class="uk-container">
-                                    <h5>Clean matching area's text<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h5>
-                                    <form class="uk-form-stacked">
-                                        <div class="uk-margin">
-                                            <label class="uk-form-label" for="word-split">N-grams length <span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
-                                            <div class="uk-form-controls">
-                                                <input class="uk-input" type="number" name="word-split" min="0" max="10" id="word-split" placeholder="Word pairs" value="2"/>
-                                            </div>
-                                        </div>
-                                        <div class="uk-margin">
-                                            <label class="uk-form-label" for="stop-words-filter"><input id="stop-words-filter" class="uk-checkbox" type="checkbox"> Remove stop words <span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
-                                        </div>
-                                        <div class="uk-margin">
-                                            <label class="uk-form-label" for="punctuation-filter"><input id="punctuation-filter" class="uk-checkbox" type="checkbox"> Remove punctuation <span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
-                                        </div>
-                                        <div class="uk-margin">
-                                            <label class="uk-form-label" for="letter-case-select">Letter case convertion to <span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
-                                            <div class="uk-form-controls">
-                                                <select class="uk-select" id="letter-case-select">
-                                                    <option>None</option>
-                                                    <option>Lowercase</option>
-                                                    <option>Uppercase</option>
-                                                </select>
-                                            </div>
-                                        </div>
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-                        </div>
-                    </li>
-                </ul>
-            <div>
-                <div class="uk-container uk-container-expand">
-                    <div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
-                        <div>
-                            <h4>Matching results<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
-                        </div>
-                        <div id="documents-section" class="uk-inline">
-                            <div id="documents-change-btn" class="uk-float-right">
-                                <span id="docs-number" class="uk-text">0 documents uploaded</span>
-                                <span id="docs-more-btn" class="uk-margin-small-left" uk-icon="icon: more" style="display: none;"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <button id="run-mining-btn" class="uk-button uk-button-primary uk-margin-top" disabled>Run mining</button>
-                </div>
-                <div id="initial-docs-upload-form" class="uk-card uk-card-default uk-card-large uk-card-body">
-                    <h4>Choose a sample of documents to load<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
-                    <div class="uk-text-center">
-                        <button id="egi-sample" class="uk-button uk-width-large uk-button-primary uk-margin-small">EGI documents</button>
-                        <button id="rcuk-sample" class="uk-button uk-width-large uk-button-primary uk-margin-small">RCUK documents</button>
-                        <button id="arxiv-sample" class="uk-button uk-width-large uk-button-primary uk-margin-small">ARXIV documents</button>
-                    </div>
-                    <h4>Upload your project codes you want to match<span uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
-                    <div class="test-upload uk-placeholder uk-text-center">
-                        <p><span uk-icon="icon: upload; ratio: 3.5"></span></p>
-                        <p>
-                            <span class="uk-text-middle">Attach documents file by dropping them here or</span>
-                            <div uk-form-custom>
-                                <form id="docs-input-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
-                                    <input type="file" name="upload" id="docs-file-input" class="inputfile">
-                                </form>
-                                <span class="uk-link">browse documents file</span>
-                            </div>
-                        </p>
-                        <p>
-                            <span class="uk-label uk-margin-small-right">JSON</span><span class="uk-label uk-margin-small-right">PDF</span><span class="uk-label">TXT</span>
-                            <span class="uk-text">file types</span>
-                        </p>
-                        <p class="uk-text-middle">Maximum 10MB upload</p>
-                    </div>
-                </div>
-                <div id="results-section" class="uk-section uk-section-default" style="display: none;">
-                    <div class="uk-container" style="overflow: auto; -webkit-overflow-scrolling: touch; max-height: 600px;">
-                        <ul id="docs-results" uk-accordion="multiple: true">
-                            
-                        </ul>
-                    </div>
-                </div>
-                <button id="next-button" class="uk-button uk-button-primary uk-margin-top uk-margin-right uk-float-right">Next</button>
-            </div>
-        </div>
+<div id="wait-spinner-modal-center" class="uk-flex-top uk-modal" esc-close="false" bg-close="false" uk-modal>
+    <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+        <p class="uk-text-center uk-text-middle uk-text-large">Working on it, please wait... <span uk-spinner></span></p>
     </div>
 </div>
 
diff --git a/interactive-mining-madoap/madoap/src/templates/create_upload_profile.html b/interactive-mining-madoap/madoap/src/templates/create_upload_profile.html
index cf14f68..90f4f71 100644
--- a/interactive-mining-madoap/madoap/src/templates/create_upload_profile.html
+++ b/interactive-mining-madoap/madoap/src/templates/create_upload_profile.html
@@ -5,14 +5,24 @@
 
 <div class="uk-section uk-section-default">
     <div class="uk-container uk-container-small">
-        <a class="test-upload uk-button uk-button-default uk-width-1-1 uk-button-large uk-text-center" href="upload-codes?new=1">
+        <a class="test-upload uk-button uk-button-default uk-width-1-1 uk-button-large uk-text-center cm-main-button" href="upload-codes?new=1">
             <span class="uk-text-middle">Create a new mining profile</span>
         </a>
         <div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>
-        <div class="test-upload uk-button uk-button-link uk-width-1-1 uk-text-center">
-            <span class="uk-text-middle">UPLOAD your existing profile to edit</span>
+        <a id="example-load-btn" class="uk-button uk-button-default uk-width-1-1 uk-button-large uk-text-center">
+            <span class="uk-text-middle">Load example profile</span>
+        </a>
+        <div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>
+        <div class="test-upload uk-button uk-button-link uk-width-1-1 uk-text-center" style="font-size: 14px;">
+            <div uk-form-custom>
+                <form id="profile-input-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
+                    <input type="file" name="upload" id="profile-file-input" class="inputfile">
+                </form>
+                <span class="uk-text-middle">UPLOAD your existing profile to edit</span>
+            </div>
         </div>
     </div>
 </div>
 
+<script src="/static/create-upload-profile.js" type="text/javascript"></script>
 {% end %}
\ No newline at end of file
diff --git a/interactive-mining-madoap/madoap/src/templates/save_profile.html b/interactive-mining-madoap/madoap/src/templates/save_profile.html
index 71ac3c8..aa53191 100644
--- a/interactive-mining-madoap/madoap/src/templates/save_profile.html
+++ b/interactive-mining-madoap/madoap/src/templates/save_profile.html
@@ -3,27 +3,36 @@
 {% block content %}
 <title>Save profile</title>
 
-<a href="/"><button id="cancel-main-btn" class="uk-close-large" type="button" uk-close></button></a>
-<div class="uk-container tm-toolbar custom-discover-toolbar uk-visible@m uk-container-small">
-    <div class="uk-flex uk-flex-middle">
-        <div class="uk-margin-auto-right">
-            <div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack" uk-grid="margin: uk-margin-small-top">
-                <div class="uk-first-column">
-                    <ul class="uk-subnav uk-subnav-line">
-                        <li><a href="upload-codes">Upload your project codes</a></li>
-                        <li><a href="configure-profile">Configure the matching proccess</a></li>
-                        <li class="custom-discover-li"><a class="router-link-active" href="save-profile">Save matching profile</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
+<div class="uk-flex-inline cm-nav-container">
+    <div class="cm-left-box"><a href="/"><button id="cancel-main-btn" class="uk-close-large cm-close-btn" type="button" uk-close></button></a></div>
+    <div class="cm-navigation cm-nav-toolbar">
+        <ul class="uk-subnav uk-subnav-line">
+            <li class="cm-nav-li">
+                <a class="cm-nav-a" href="upload-codes">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">1</span></div>
+                    <span class="cm-nav-title uk-text-middle">Matching context<br>definition</span>
+                </a>
+            </li>
+            <li class="cm-nav-li">
+                <a class="cm-nav-a" href="configure-profile">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">2</span></div>
+                    <span class="cm-nav-title uk-text-middle">Matching proccess<br>configuration</span>
+                </a>
+            </li>
+            <li class="cm-nav-li cm-nav-active">
+                <a class="cm-nav-a">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">3</span></div>
+                    <span class="cm-nav-title uk-text-middle">Save your<br>matching profile</span>
+                </a>
+            </li>
+        </ul>
     </div>
 </div>
 
 <div class="uk-section uk-section-default">
     <div class="uk-container uk-container-small">
 
-		<a id="save-profile-btn" class="test-upload uk-button uk-button-default uk-width-1-1 uk-button-large uk-text-center" href="save-profile?saveprofile=1">
+		<a class="test-upload uk-button uk-button-default uk-width-1-1 uk-button-large uk-text-center cm-main-button" href="save-profile?saveprofile=1">
 		    <span uk-icon="icon: download"></span>
 		    <span class="uk-text-middle">Download profile</span>
 		</a>
diff --git a/interactive-mining-madoap/madoap/src/templates/upload_codes.html b/interactive-mining-madoap/madoap/src/templates/upload_codes.html
index c7f23a3..3ce725a 100644
--- a/interactive-mining-madoap/madoap/src/templates/upload_codes.html
+++ b/interactive-mining-madoap/madoap/src/templates/upload_codes.html
@@ -4,34 +4,61 @@
 <title>Upload project codes</title>
 <link rel="stylesheet" href="/static/animations.css"/>
 
-<a href="/"><button id="cancel-main-btn" class="uk-close-large" type="button" uk-close></button></a>
-<div class="uk-container tm-toolbar custom-discover-toolbar uk-visible@m uk-container-small">
-    <div class="uk-flex uk-flex-middle">
-        <div class="uk-margin-auto-right">
-            <div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack" uk-grid="margin: uk-margin-small-top">
-                <div class="uk-first-column">
-                    <ul class="uk-subnav uk-subnav-line">
-                        <li class="custom-discover-li"><a href="upload-codes" class="router-link-active">Upload your project codes</a></li>
-                        <li><a href="configure-profile">Configure the matching proccess</a></li>
-                        <li><a>Save matching profile</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
+<div class="uk-flex-inline cm-nav-container uk-margin-medium-bottom">
+    <div class="cm-left-box"><a href="/"><button id="cancel-main-btn" class="uk-close-large cm-close-btn" type="button" uk-close></button></a></div>
+    <div class="cm-navigation cm-nav-toolbar">
+        <ul class="uk-subnav uk-subnav-line">
+            <li class="cm-nav-li cm-nav-active">
+                <a class="cm-nav-a">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">1</span></div>
+                    <span class="cm-nav-title uk-text-middle">Matching context<br>definition</span>
+                </a>
+            </li>
+            <li class="cm-nav-li cm-nav-disabled">
+                <a class="cm-nav-a">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">2</span></div>
+                    <span class="cm-nav-title uk-text-middle">Matching proccess<br>configuration</span>
+                </a>
+            </li>
+            <li class="cm-nav-li cm-nav-disabled">
+                <a class="cm-nav-a">
+                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">3</span></div>
+                    <span class="cm-nav-title uk-text-middle">Save your<br>matching profile</span>
+                </a>
+            </li>
+        </ul>
     </div>
 </div>
 
 <div class="uk-container uk-container-small">
-    <h4>Upload your project codes you want to match <span title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span></h4>
+    <h4>Input options</h4>
+    <p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
-    <form id="codes-file-input-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
+<!--     <form id="codes-file-input-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
         <div class="uk-margin">
             <div uk-form-custom>
                 <input type="file" name="upload" id="codes-file-input" class="inputfile" />
-                <strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> Choose a file&hellip;</strong>
+                <strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></strong>
+                <button class="uk-button uk-button-default" type="button" tabindex="-1">Choose file</button>
             </div>
         </div>
-    </form>
+    </form> -->
+
+    <div class="js-upload uk-placeholder cm-file-drop-area cm-coloured-text">
+        <div class="uk-flex uk-flex-middle uk-grid-collapse uk-child-width-expand@s" uk-grid>
+            <div>
+                <span uk-icon="icon: cloud-upload"></span>
+                <span class="uk-text-middle"> Upload matching context .tsv file type</span>
+                <span class="cm-tooltip" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span>
+            </div>
+            <div uk-form-custom>
+                <input type="file" name="upload" id="codes-file-input" class="inputfile" />
+                <button class="uk-button uk-button-default cm-main-button" type="button" tabindex="-1">Choose file</button>
+            </div>
+        </div>
+    </div>
+    <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
+
 
 <!--     <div class="test-upload uk-placeholder uk-text-center">
         <p><span uk-icon="icon: upload; ratio: 3.5"></span></p>
@@ -49,21 +76,26 @@
         <p class="uk-text-middle">Maximum 10MB upload</p>
     </div> -->
 
-    <input id="initial-type-input" class="uk-input uk-form-width-medium uk-form-large uk-width-1-1 uk-text-center" type="text" placeholder="Start typing project or Paste">
 
-    <table id="data-table" class="uk-table uk-table-divider .uk-table-striped uk-table-hover" style="display: none;">
+    <div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>
+
+    <input id="initial-type-input" class="uk-form-width-medium uk-form-large uk-width-1-1 uk-text-center uk-margin-bottom cm-text-input" type="text" style="display: none;" placeholder="Start typing project code or Paste project list">
+
+    <table id="data-table" class="uk-table uk-table-striped uk-table-hover cm-table">
         <thead>
             <tr>
-                <th class="uk-table-shrink">#</th>
-                <th class="uk-width-small">Name</th>
-                <th class="uk-table-expand">Acknowledgment</th>
+                <!-- <th class="uk-table-shrink cm-table-number">#</th> -->
+                <th class="uk-width-small">Keyword</th>
+                <th class="uk-table-expand">Context</th>
+                <th class="uk-table-shrink"></th>
                 <th class="uk-table-shrink"></th>
             </tr>
         </thead>
         <tfoot>
             <tr>
-                <td colspan="4"><button id="add-row-below" class="uk-button uk-button-small uk-button-default uk-width-1-1 uk-text-center">
-                    <span class="uk-text-middle"><span uk-icon="icon: plus-circle"></span> Add a row in the bottom</span>
+                <!-- <td class="cm-table-number"></td> -->
+                <td colspan="4" class="cm-table-footer"><button id="add-row-below" class="uk-button uk-button-small uk-button-default uk-width-1-1 uk-text-center cm-main-button">
+                    <span class="uk-text-middle"><span uk-icon="icon: plus-circle"></span> Create new</span>
                 </button></td>
             </tr>
         </tfoot>
@@ -71,7 +103,7 @@
         </tbody>
     </table>
 
-    <button id="next-button" class="uk-button uk-button-primary uk-margin-top uk-margin-right uk-float-right">Next</button>
+    <button id="next-button" class="uk-button uk-button-primary uk-margin-top uk-float-right" disabled>Next</button>
     <div >
     </div>
 </div>