diff --git a/assets/manhattanplot-style.css b/assets/manhattanplot-style.css
index 5aaa402cb..3bc0387e7 100644
--- a/assets/manhattanplot-style.css
+++ b/assets/manhattanplot-style.css
@@ -1,37 +1,63 @@
 #mhp-page-content {
     width: 100%;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    align-content: space-evenly;
+    align-content: space-between;
 }
 
-#mhp-controls-div {
-    width: 90%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
-    margin-bottom: 20px;
-    margin-top: 20px;
+#mhp-info-div {
+    width: 40%;
+    flex-grow: 1;
+    overflow-y: visible;
+    margin: 5px;
+    padding: 15px;
+    border: solid #C8D4E3 2px;
+    border-radius: 5px;
 }
 
-#mhp-slider-div {
-    width: 50%;
-    margin: 2px;
+.mhp-slider-div {
+    flex-grow: 1;
+    width: 20%;
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+#mhp-graph{
+    height: 650px;
+    width: 100%;
 }
 
 #mhp-graph-div{
-    width: 90%;
+    width: 60%;
+    margin: 10px;
+}
+
+.mph-control-div {
+    margin-top: 15px;
+}
+
+.mhp-vertical-style {
+    display: flex;
+    flex-direction: column;
     align-items: center;
+    justify-content: space-between;
+}
+
+.mhp-horizontal-style {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
 }
 
 .mhp-text {
+    width: 300px;
     color: #506784;
 }
 
 .mhp-intro {
     font-size: 1.3em;
-    width: 60%;
+    width: 100%;
     align-items: center;
 }
\ No newline at end of file
diff --git a/dash_bio/component_factory/_manhattan.py b/dash_bio/component_factory/_manhattan.py
index 749cbb9b3..dd64569be 100644
--- a/dash_bio/component_factory/_manhattan.py
+++ b/dash_bio/component_factory/_manhattan.py
@@ -507,7 +507,7 @@ def figure(
                                 color=highlight_color,
                                 size=point_size
                             ),
-                            name="of interest"
+                            name="Point(s) of interest"
                         )
                     )
 
@@ -530,7 +530,8 @@ def figure(
                     'showgrid': showgrid,
                     'range': [xmin, xmax],
                 },
-                yaxis={'title': ylabel}
+                yaxis={'title': ylabel},
+                hovermode='closest'
             )
 
             hover_text = _get_hover_text(
@@ -568,7 +569,8 @@ def figure(
                     'ticktext': self.ticksLabels,
                     'ticks': "outside"
                 },
-                yaxis={'title': ylabel}
+                yaxis={'title': ylabel},
+                hovermode='closest'
             )
 
             icol = 0
@@ -598,7 +600,7 @@ def figure(
                         else tmp[self.pName].values,
                         mode="markers",
                         showlegend=showlegend,
-                        name="chr%i" % chromo,
+                        name="Chr%i" % chromo,
                         marker={
                             'color': col[icol],
                             'size': point_size
diff --git a/tests/dash/app_manhattan_plot.py b/tests/dash/app_manhattan_plot.py
index 084a6cbee..e586bb0aa 100644
--- a/tests/dash/app_manhattan_plot.py
+++ b/tests/dash/app_manhattan_plot.py
@@ -22,47 +22,89 @@ def description():
     Perfect to visualize genome wide association studies (GWAS).'
 
 
+def header_colors():
+    return {
+        'bg_color': '#0D76BF',
+        'font_color': '#C8D4E3',
+        'light_logo': True
+    }
+
+
 def layout():
     return html.Div(
         id='mhp-page-content',
         children=[
             html.Div(
-                id='mhp-text',
-                className='mhp-text mhp-intro',
-                children="Visualize genome wide association studies  ("
-                         "GWAS) with efficient manhattan plots. Using "
-                         "WebGL  under the hood, interactively explore  "
-                         "hundred of thousands of points at once or  "
-                         "individually hover over them.",
+                id='mhp-graph-div',
+                className='seven columns',
+                children=dcc.Graph(
+                    figure=fig,
+                    id='mhp-graph',
+                    config={'scrollZoom': True},
+                )
             ),
             html.Div(
-                id='mhp-controls-div',
+                id='mhp-info-div',
+                className='four columns',
                 children=[
-                    html.H5(
-                        "Threshold value (red line)",
-                        className='mhp-text',
+                    html.Div(
+                        id='mhp-text',
+                        className='row mhp-text mhp-intro',
+                        children="Visualize genome wide association studies  ("
+                                 "GWAS) with efficient manhattan plots. Using "
+                                 "WebGL  under the hood, interactively explore  "
+                                 "hundred of thousands of points at once or  "
+                                 "individually hover over them.",
+                    ),
+                    html.Div(
+                        className='mhp-horizontal-style mph-control-div',
+                        id='mhp-slider-genome-div',
+                        children=[
+                            html.H5(
+                                "Threshold value (red line)",
+                                className='mhp-text',
+                            ),
+                            html.Div(
+
+                                className='mhp-slider-div',
+                                children=dcc.Slider(
+                                    id='mhp-slider-genome',
+                                    vertical=False,
+                                    updatemode='mouseup',
+                                    max=9,
+                                    min=1,
+                                    value=7,
+                                    marks={i + 1: '{}'.format(i + 1) for i in range(9)},
+                                    step=0.05
+                                ),
+                            )
+                        ]
                     ),
                     html.Div(
-                        id='mhp-slider-div',
-                        children=dcc.Slider(
-                            id='mhp-slider',
-                            vertical=False,
-                            updatemode='mouseup',
-                            max=9,
-                            min=1,
-                            value=7,
-                            marks={i + 1: '{}'.format(i + 1) for i in range(9)}
-                        ),
-                    )
+                        className='mhp-horizontal-style mph-control-div',
+                        id='mhp-slider-indic-div',
+                        children=[
+                            html.H5(
+                                "Suggestive line (purple)",
+                                className='mhp-text',
+                            ),
+                            html.Div(
+                                className='mhp-slider-div',
+                                children=dcc.Slider(
+                                    id='mhp-slider-indic',
+                                    vertical=False,
+                                    updatemode='mouseup',
+                                    max=9,
+                                    min=1,
+                                    value=6,
+                                    marks={i + 1: '{}'.format(i + 1) for i in range(9)},
+                                    step=0.05
+                                ),
+                            )
+                        ]
+                    ),
                 ]
             ),
-            html.Div(
-                id='mhp-graph-div',
-                children=dcc.Graph(
-                    figure=fig,
-                    id='mhp-graph'
-                )
-            )
         ]
     )
 
@@ -71,9 +113,14 @@ def callbacks(app):
     @app.callback(
         Output('mhp-graph', 'figure'),
         [
-            Input('mhp-slider', 'value'),
+            Input('mhp-slider-genome', 'value'),
+            Input('mhp-slider-indic', 'value'),
         ]
     )
-    def update_graph(slider_val):
+    def update_graph(slider_genome, slider_indic):
         """update the data sets upon change the genomewideline value"""
-        return dash_bio.ManhattanPlot(df, genomewideline_value=float(slider_val))
+        return dash_bio.ManhattanPlot(
+            df,
+            genomewideline_value=float(slider_genome),
+            suggestiveline_value=float(slider_indic),
+        )