diff --git a/histoqc/ui/__init__.py b/histoqc/ui/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/histoqc/ui/app.py b/histoqc/ui/__main__.py
similarity index 80%
rename from histoqc/ui/app.py
rename to histoqc/ui/__main__.py
index 4cbb22e..8b3d4f9 100644
--- a/histoqc/ui/app.py
+++ b/histoqc/ui/__main__.py
@@ -2,17 +2,13 @@
 import argparse
 import os
 
-from HQC_html import html
+from histoqc.ui.HQC_html import html
 
 app = Flask(__name__)
 app.register_blueprint(html)
 app.logger_name = 'flask'
 
-# resultsfilepath = "/data/jjaco34/histoqc_results/tsv_run_no_exceptions/results_clean.tsv"
-# app.config['data_directory'] = os.path.dirname(resultsfilepath)
-# app.config['results_filename'] = os.path.basename(resultsfilepath)
-
-if __name__ == '__main__':
+def main():
     parser = argparse.ArgumentParser(prog="histoqc.ui",description="launch server for result viewing in user interface")
     parser.add_argument('--port', '-p', type=int, default=5000, help='Specify the port [default:5000]')
     parser.add_argument('resultsfilepath', type=str, help='Specify the full path to the results file. The user must specify this path.')
@@ -26,4 +22,7 @@
     app.logger.info('Starting Flask app')
     app.run(host='0.0.0.0', port=args.port, debug=True, threaded=True)
 
+if __name__ == '__main__':
+    main()
+
 
diff --git a/histoqc/ui/static/css/index.css b/histoqc/ui/static/css/image-view.css
similarity index 57%
rename from histoqc/ui/static/css/index.css
rename to histoqc/ui/static/css/image-view.css
index 5bcd761..004fcf5 100644
--- a/histoqc/ui/static/css/index.css
+++ b/histoqc/ui/static/css/image-view.css
@@ -1,84 +1,3 @@
-/* :root {
-	--selected-color: orangered;
-	--foreground-color: #007bff;
-	--background-color: #ddd;
-}
-
-html, body {
-	line-height: 1; 
-}
-
-th {
-	font-weight: normal;
-} */
-
-/* .px-md-4 {
-	padding-left: 30px!important;
-	padding-right: 30px!important;
-}
-
-.btn-outline-secondary {
-	border-width: 1.5px;
-}
-
-.m-container {
-	border-width: 1px;
-	border-radius: 5px;
-	border-color: #eee;
-}
-
-#dataset-tag {
-	display: none;
-	color: #aaa;
-}
-
-#view-mngmt-btn-group {
-	display: none;
-}
-
-#table-btn,
-#chart-btn,
-#image-btn {
-	width: 80px;
-}
-
-.view-enabled {
-	display: inline-block;
-	color: #212529;
-	background-color: #f8f9fa;
-	border-color: #f8f9fa;
-}
-
-.view-disabled {
-	display: inline-block;
-	color: #212529;
-	background-color: transparent;
-	border-color: #efefef;
-}
-
-#view-mngmt-btn-hidden {
-	display: none;
-}
-
-#upload-button {
-	margin-top: 15%;
-}
-
-#upload-input,
-#cf-input {
-	display: none;
-}
-
-#table-view {
-	display: none;
-	height: 230px;
-}
-
-#chart-view {
-	display: none;
-	height: 330px;
-} */
-
 #image-view {
 	display: none;
 }
@@ -116,53 +35,18 @@ th {
 }
 
 .control-group {
-	position: fixed;
+	position: relative;
 	padding-left: 0px;
 	padding-top: 0px;
-/*	padding-left: 0.5rem;
-	padding-top: 0.5rem;
-*/	/*width: 100%;*/
 	z-index: 1;
 	opacity: 0.9;
 	height: 20px;
 }
 
-/* img view */
-/*#exit-image-select-view-btn,
-#img-select-button {
-	position: fixed;
-	padding-left: 15px;
-	padding-top: 15px;
-	z-index: 1;
-}
-*/
 #exit-image-select-view-btn {
 	display: none;
 }
 
-/*#img-select,
-#comparison-select,
-#chart-select,
-#chart-sort-btn,
-#vis-switch-btn {
-	border-width: 1.5px;
-	height: 40px;
-	color: #898f94;
-	border-color: #898f94;
-	text-shadow: 0.5px 0.5px 1px #000;
-	font-size: 18px;
-}
-*/
-/*#img-select:hover,
-#comparison-select:hover,
-#chart-select:hover,
-#chart-sort-btn:hover,
-#vis-switch-btn:hover {
-	background-color: #898f94;
-	color: #fff;
-}
-*/
-
 #overview-gallery {
 	height: 100%;
 	display: flex;
diff --git a/histoqc/ui/static/css/scatterplot.css b/histoqc/ui/static/css/scatterplot.css
new file mode 100644
index 0000000..de33ded
--- /dev/null
+++ b/histoqc/ui/static/css/scatterplot.css
@@ -0,0 +1,68 @@
+#lasso-canvas {
+    z-index: 2;
+    cursor: crosshair;
+  }
+
+#highlighted-canvas {
+    z-index: 1;
+    cursor: grab;
+}
+
+#axis-svg {
+    z-index: 0;
+}
+
+.control-group-element {
+    margin-left: 15px;
+    padding-left: 3px;
+    padding-right: 3px;
+    border: 1px solid black;
+    border-color: #000;
+    border-radius: 2px;
+}
+
+
+#scatter-parent {
+    position: relative;
+}
+
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+
+.tick line {
+    opacity: 0.2;
+}
+
+.tooltip {
+    box-sizing: border-box;
+    position: absolute;
+    display: none;
+    top: 0;
+    left: -100000000px;
+    padding: 8px 12px;
+    font-family: sans-serif;
+    font-size: 12px;
+    color: #333;
+    background-color: #fff;
+    border: 1px solid #333;
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: 2;
+    opacity: unset;
+}
+
+#scatter-mode-selector * {
+    margin: 0px 2px 0px 2px;
+}
+
+#scatter-mode-selector{
+    padding: 3px;
+    margin: 3px;
+    border: 1px solid black;
+    border-radius: 3%;
+    border-width: 1px;
+}
\ No newline at end of file
diff --git a/histoqc/ui/static/css/style.css b/histoqc/ui/static/css/style.css
index aaf6e0c..a16321f 100755
--- a/histoqc/ui/static/css/style.css
+++ b/histoqc/ui/static/css/style.css
@@ -1,10 +1,56 @@
+body,
+html {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-size: 12px;
+  background-color: aliceblue;
+}
+
 body {
-  font-size: 14px;
-  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-  margin: 24px;
-  background: #fcfcfc;
-  line-height: 1.45em;
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+.plot {
+  position: absolute;
+}
+
+.card-header {
+  padding: 5px;
+}
+
+#scatter-card {
+  height: 25vh;
+  width: 15vw;
+}
+
+#parcoords-card {
+  height: 25vh;
+}
+
+#overview-gallery-card {
+  height: 45vh;
+}
+
+#plot-canvas {
+  z-index: 0;
+
+}
+
+#grid {
+  height: 15vh;
+}
+
+.slick-pager {
+  height: 100%;
+}
+
+.popover-header {
+  margin: 0;
 }
+
 a {
   color: #555;
 }
@@ -21,13 +67,7 @@ ul {
 p {
   width: 560px;
 }
-pre {
-  color: #444;
-  font-family: Ubuntu Mono, Monaco, monospace;
-  padding: 4px 8px;
-  background: #f2f2f2;
-  border: 1px solid #ccc;
-}
+
 h1 small {
   font-weight: normal;
   font-size: 0.5em;
@@ -49,11 +89,6 @@ input {
 }
 
 /*SlickGrid */
-#grid {
-  width: 100% !important;  /* vs jquery resizable */
-  height: 437px;
-  margin-top: 4px;
-}
 .slick-header-column {
   font-weight:bold;
   cursor: move;
diff --git a/histoqc/ui/templates/index.html b/histoqc/ui/templates/index.html
index bf0b36f..c9bfe8a 100644
--- a/histoqc/ui/templates/index.html
+++ b/histoqc/ui/templates/index.html
@@ -26,125 +26,15 @@
   <script src="{{url_for('static', filename='libs/slickgrid/js/controls/slick.pager.js')}}"></script>
   <script src="{{url_for('static', filename='libs/slickgrid/js/controls/slick.columnpicker.js')}}"></script>
 
+  <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='libs/bootstrap/css/bootstrap.css')}}">
   <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='libs/parcoords/css/parcoords.css')}}">
   <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/style.css')}}">
-  <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/index.css')}}">
-  <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='libs/bootstrap/css/bootstrap.css')}}">
-
-  <style>
-    body,
-    html {
-      margin: 0;
-      height: 100%;
-      width: 100%;
-      overflow: hidden;
-      font-size: 12px;
-      background-color: aliceblue;
-    }
-
-    body {
-      overflow-y: hidden;
-      overflow-x: hidden;
-    }
-
-    .plot {
-      position: absolute;
-    }
-
-    #scatter-card {
-      height: 25vh;
-      width: 15vw;
-    }
-
-    #parcoords-card {
-      height: 25vh;
-    }
-
-    #overview-gallery-card {
-      height: 45vh;
-    }
-
-    #plot-canvas {
-      z-index: 0;
-
-    }
+  <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/image-view.css')}}">
+  <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/scatterplot.css')}}">
 
-    #grid {
-      height: 15vh;
-    }
 
-    .slick-pager {
-      height: 100%;
-    }
-
-    #lasso-canvas {
-      z-index: 2;
-      cursor: crosshair;
-    }
-
-    #highlighted-canvas {
-      z-index: 1;
-      cursor: grab;
-    }
-
-    #axis-svg {
-      z-index: 0;
-    }
-
-    .control-group-element {
-      margin-left: 15px;
-      padding-left: 3px;
-      padding-right: 3px;
-      border: 1px solid black;
-      border-color: #000;
-      border-radius: 2px;
-    }
-
-
-    #scatter-parent {
-      position: relative;
-    }
-
-    .axis path,
-    .axis line {
-      fill: none;
-      stroke: #000;
-      shape-rendering: crispEdges;
-    }
-
-    .tick line {
-      opacity: 0.2;
-    }
-
-    .tooltip {
-      box-sizing: border-box;
-      position: absolute;
-      display: none;
-      top: 0;
-      left: -100000000px;
-      padding: 8px 12px;
-      font-family: sans-serif;
-      font-size: 12px;
-      color: #333;
-      background-color: #fff;
-      border: 1px solid #333;
-      border-radius: 4px;
-      pointer-events: none;
-      z-index: 2;
-      opacity: unset;
-    }
+  <style>
 
-    #scatter-mode-selector * {
-      margin: 0px 2px 0px 2px;
-    }
-    
-    #scatter-mode-selector{
-      padding: 3px;
-      margin: 3px;
-      border: 1px solid black;
-      border-radius: 3%;
-      border-width: 1px;
-    }
   </style>
   <script src="{{url_for('static', filename='libs/d3/js/d3.min.js')}}"></script>
   <script src="{{url_for('static', filename='libs/parcoords/js/parcoords.standalone.js')}}"></script>
@@ -160,7 +50,6 @@
   <script src="{{url_for('static', filename='js/scatterplot.js')}}"></script>
   <script src="{{url_for('static', filename='js/histoqc.js')}}"></script>
   <script src="{{url_for('static', filename='js/cohortfinder.js')}}"></script>
-  <script src="{{url_for('static', filename='js/batcheffectinfo.js')}}"></script>
 </head>
 
 <body>