diff --git a/assets/custom-functions.js b/assets/custom-functions.js
index 49b296df529af7063d215039b1e10aae69d71e76..708bbe3c12be3f36a9e5bce5415153f3c09a92d6 100644
--- a/assets/custom-functions.js
+++ b/assets/custom-functions.js
@@ -135,9 +135,13 @@ $(window).on('load', function removeFullscreen () {
 
 // Move datepicker above the time series area
 $(document).ready(function () {
-	$(document).on('click', ".SingleDatePicker", function () {
+	$(document).on('click', ".SingleDatePickerInput_clearDate, .SingleDatePicker", function moveDatePicker () {
 		const element = document.getElementsByClassName('DayPicker')[0];
-		element.style.position = 'absolute';
-		element.style.bottom = '78px';
+		if (element != null) {
+		    element.style.position = 'absolute';
+		    element.style.bottom = '78px';
+		}else {
+		    setTimeout(moveDatePicker, 20);
+		};
 	});
 });
diff --git a/assets/images/img-bg-404.jpg b/assets/images/img-bg-404.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..13e3fcf08266ea1dd25d475240ab93d4daa8361d
Binary files /dev/null and b/assets/images/img-bg-404.jpg differ
diff --git a/assets/sidebar.css b/assets/sidebar.css
index 839d9db28ff447dac9623fb8f1a744a7ded668c2..7114bac632bdd44b412b6211756151cafa4690b4 100644
--- a/assets/sidebar.css
+++ b/assets/sidebar.css
@@ -1,4 +1,9 @@
 /* The side navigation menu */
+:root {
+  --blue: #2B383E; 
+  --yellow: #F1B545;
+}
+
 .sidebar {
   position: absolute;
   top: 0;
@@ -6,13 +11,13 @@
   width: 200px;
   height: 100%;
   font-family: "Roboto", sans-serif;
-  color: #2B383E !important;
+  color: var(--blue) !important;
   background-color: #FAFAFA;
   overflow: hidden;
 }
 
 .sidebar-first-item {
-    background-color: #F1B545 !important;
+    background-color: var(--yellow) !important;
 }
 
 .sidebar-first-item>label {
@@ -22,7 +27,7 @@
 }
 
 .sidebar-first-item .Select-control, .sidebar-first-item .Select-control .Select-multi-value-wrapper .Select-input {
-    background-color: #F1B545 !important;
+    background-color: var(--yellow) !important;
     color: grey;
     font-weight: bold;
     height: 2rem !important;
@@ -79,11 +84,11 @@
 
 .sidebar-item>button:hover, .sidebar-item>button:focus {
     font-weight: bold;
-    color: #2B383E;
+    color: var(--blue);
 }
 
 .sidebar-first-item .Select-menu-outer {
-    background-color: #F1B545 !important;
+    background-color: var(--yellow) !important;
     overflow: hidden;
 }
 
@@ -94,7 +99,7 @@
 */
 
 .sidebar-dropdown {
-    max-height: 350px;
+    max-height: 46vh;
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -219,7 +224,7 @@
 .sidebar-bottom #download-button {
   background-image: url("/daily_dashboard/assets/images/Icon_Download.png");
   background-position: 1rem;
-  background-color: #2B383E;
+  background-color: var(--blue);
   padding-left: 2rem;
   width: 100%;
   height: 100%;
@@ -228,7 +233,7 @@
 #models-apply,
 #prob-apply,
 #was-apply {
-  background-color: #2B383E;
+  background-color: var(--blue);
     color: #FFFFFF;
     font-family: "Roboto", sans-serif !important;
     letter-spacing: 0;
@@ -264,7 +269,7 @@ span>#was-apply {
 .sidebar-bottom  #download-button {
     background-image: url("assets/images/Icon_Download.png");
     background-position: 1rem;
-    background-color: #2B383E;
+    background-color: var(--blue);
     padding-left: 2rem;
     width: -webkit-fill-available;
     width: -moz-available;
@@ -275,7 +280,8 @@ span>#was-apply {
     background-image: url("/daily_dashboard/assets/images/download.svg");
     background-repeat: no-repeat;
     background-position: 0.5rem;
-    background-color: lightgrey;
+    /* background-color: var(--yellow) !important; */
+    background-color: lightgrey !important;
     display: block;
     width: 98%;
     height: 4vh;
@@ -283,17 +289,34 @@ span>#was-apply {
     padding-left: 1rem !important;
     text-align: center;
     font-size: Small;
-    color:  #2b383e !important;
-    border: 2px solid #2b383e !important;
+    color: var(--blue);
+    color: rgb(0 0 0 / 70%);
+    border: 2px solid var(--blue) !important;
     text-decoration: none;
+    box-shadow: rgb(0 0 0 / 50%) 3px 3px 3px, rgb(0 0 0 / 50%) 0px 1px 2px !important;
+    transition: box-shadow .05s ;
+}
+
+.sidebar-bottom .card-text>.download-section:hover {
+    color: var(--blue);
+    font-weight: 700;
+    box-shadow: rgb(0 0 0 / 50%) 6px 6px 3px, rgb(0 0 0 / 50%) 0px 1px 2px !important;
+    transition: box-shadow .05s ;
+}
+
+.sidebar-bottom .card-text>.download-section:active {
+    color: var(--blue);
+    font-weight: 700;
+    box-shadow: rgb(0 0 0 / 75%) 0px 0px 2px, rgb(0 0 0 / 75%) 0px 1px 2px !important;
+    border: 1.5px solid var(--blue) !important;
+    transition: box-shadow .01s; 
 }
 
 .sidebar-bottom .card-text>p>a {
-    color:  #2b383e;
+    color:  var(--blue);
     text-decoration: underline;
 }
 
-
 .collapsible-cards {
     margin: 0 !important;
 }
@@ -307,7 +330,7 @@ span>#was-apply {
     border: none;
 }
 .collapsible-cards .col .collapse .card .card-body {
-    height: 25vh !important;
+    height: 29vh !important;
     overflow: auto;
     font-size: Small;
 }
diff --git a/assets/style.css b/assets/style.css
index a5a70dc6d5a4497055c4ed08bc19d5b0799ff593..2b20604ae93435dd30a516375cc4c54a1223fc96 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,3 +1,8 @@
+:root {
+  --blue: #2B383E; 
+  --yellow: #F1B545;
+}
+
 body {
 	background-color: #212529;
 }
@@ -19,7 +24,7 @@ a.modebar-btn {
 }
 
 .tab-container {
-    background-color: #2B383E !important;
+    background-color: var(--blue) !important;
     height: 3.8rem;
 }
 
@@ -33,13 +38,13 @@ a.modebar-btn {
 }
 
 :hover.tab.horizontal-menu>span, .tab.horizontal-menu.tab--selected>span {
-    color: #F1B545 !important;
-    border-bottom: 4px solid #F1B545 !important;
+    color: var(--yellow) !important;
+    border-bottom: 4px solid var(--yellow) !important;
     padding-bottom: 0.8rem !important;
 }
 
 #fullscreen-tab:hover:after {
-    color: #F1B545;
+    color: var(--yellow);
 }
 
 #fullscreen-tab::after {
@@ -58,7 +63,7 @@ a.modebar-btn {
 }
 
 .horizontal-menu {
-    background-color: #2B383E !important;
+    background-color: var(--blue) !important;
     font-family: "Roboto", sans-serif;
     font-weight: bold;
     border: none !important;
@@ -116,7 +121,7 @@ a.modebar-btn {
 .description-body>p {
   /*height: 47px;*/
   opacity: 0.8;
-  color: #2B383E;
+  color: var(--blue);
   font-family: "Roboto", sans-serif !important;
   font-size: 14px;
   letter-spacing: 0;
@@ -128,7 +133,7 @@ a.modebar-btn {
   position: relative;
   opacity: 0.8;
   background-color: #ffffff !important;
-  color: #2B383E;
+  color: var(--blue);
   font-family: "Roboto", sans-serif !important;
   font-size: 14px;
   letter-spacing: 0;
@@ -153,12 +158,12 @@ a.modebar-btn {
 }
 
 .btn-link {
-  color: #2B383E;
+  color: var(--blue);
   font-family: "Roboto", sans-serif !important;
 }
 
 #eval-apply, #scores-apply, #scores-map-apply {
-  background-color: #2B383E;
+  background-color: var(--blue);
   color: #FFFFFF;
   font-family: "Roboto", sans-serif !important;
   letter-spacing: 0;
@@ -185,13 +190,13 @@ button#scores-map-apply {
 }
 
 .timesliderline #date {
-    color: #F1B545 !important;
+    color: var(--yellow) !important;
     font-family: "Roboto", sans-serif !important;
     font-size: 1rem;
     font-weight: bold;
     text-transform: uppercase;
     padding: 0.9rem 0rem 0.6rem 1.1rem;
-    background-color: #2B383E !important;
+    background-color: var(--blue) !important;
     border: none !important;
     cursor: pointer;
 }
@@ -237,7 +242,7 @@ input.DateInput_input {
 
 div.SingleDatePickerInput {
     border: none;
-	background-color: #2B383E !important;
+	background-color: var(--blue) !important;
 }
 
 .SingleDatePicker_picker {
@@ -281,7 +286,7 @@ div.SingleDatePickerInput {
 .SingleDatePickerInput_clearDate:hover {
 	width: 34px;
 	height: 34px;
-	background-color: #F1B545 !important;
+	background-color: var(--yellow) !important;
 }
 
 #was-slider-graph, #prob-slider-graph, #obs-vis-slider-graph {
@@ -306,18 +311,18 @@ div.SingleDatePickerInput {
     width: 8rem;
     margin: 0.5rem;
     border-radius: 0;
-    border: solid 3px #2B383E !important;
+    border: solid 3px var(--blue) !important;
     background-color: #FFFFFF !important;
-    color: #2B383E !important;
+    color: var(--blue) !important;
 }
 
 #rgb-buttons .btn:hover {
-    background-color: #2B383E !important;
+    background-color: var(--blue) !important;
     color: #FFFFFF !important;
 }
 
 #rgb-buttons .active {
-    background-color: #2B383E !important;
+    background-color: var(--blue) !important;
     color: #FFFFFF !important;
 }
 
@@ -367,14 +372,14 @@ div.SingleDatePickerInput {
     margin-right: 0.5rem;
     border: none !important;
     outline: none !important;
-    color: #2B383E;
+    color: var(--blue);
     background-color: #fff !important;
     display: inline-flex;
     padding: 9px 10px;
 }
 
 .timesliderline>button:hover {
-    background-color: #F1B545 !important;
+    background-color: var(--yellow) !important;
 }
 
 .timesliderline>button:focus {
@@ -398,7 +403,7 @@ div.SingleDatePickerInput {
 .playbutton {
     background-image: url('/daily_dashboard/assets/images/Play.png');
     background-repeat: no-repeat;
-    background-color: #2B383E;
+    background-color: var(--blue);
 }*/
 
 #obs-dropdown, #obs-mod-dropdown {
@@ -414,7 +419,7 @@ div.SingleDatePickerInput {
 .linetool>label {
     font-size: Small;
     opacity: 0.8;
-    color: #2B383E;
+    color: var(--blue);
     font-family: "Roboto", sans-serif !important;
     margin-bottom: 0;
 }
@@ -473,20 +478,20 @@ div.SingleDatePickerInput {
 .CalendarDay__hovered_span, .CalendarDay__hovered_span:hover, .linetool .CalendarDay__selected_span {
     background: #D8A443;
     border: 1px double #D8A443;
-    color: #2B383E;
+    color: var(--blue);
 }
 
 .CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
-    background: #F1B545;
-    border: 1px double #F1B545;
-    color: #2B383E;
+    background: var(--yellow);
+    border: 1px double var(--yellow);
+    color: var(--blue);
 }
 
 .timesliderline {
     display: inline-block;
     vertical-align: middle;
     height: 100%;
-    background-color: #2b383e;
+    background-color: var(--blue);
 }
 
 .timeslider {
@@ -496,7 +501,7 @@ div.SingleDatePickerInput {
     /* width: 704px;
     height: 100%;
     padding: 0.2rem;
-    background-color: #2b383e;*/
+    background-color: var(--blue);*/
 }
 
 /* Position the parent of the timeslider */
@@ -536,7 +541,7 @@ div.SingleDatePickerInput {
 
 .layout-dropdown #map-view-dropdown>button, .layout-dropdown #map-layers-dropdown>button {
     border-radius: 0 !important;
-    background-color: #2B383E !important;
+    background-color: var(--blue) !important;
     background-repeat: no-repeat;
     background-position: 1rem;
     height: 1.75rem;
@@ -581,7 +586,7 @@ div.SingleDatePickerInput {
 }
 
 .dropdown-item:focus, .dropdown-item:hover {
-    background-color: #2B383E;
+    background-color: var(--blue);
 }
 /* This targets the map in Forecast tab */
 #div-collection {
@@ -628,7 +633,7 @@ div.SingleDatePickerInput {
     float: left;
     width: 4rem;
     height: 4rem;
-    background-color: #2b383e;
+    background-color: var(--blue);
     color: #ffffff;
     border-radius: 50%;
 }
@@ -658,7 +663,7 @@ div.SingleDatePickerInput {
 }
 
 .popup-ts-button {
-    background-color: #2b383e;
+    background-color: var(--blue);
     color: #ffffff;
     font-family: "Roboto", sans-serif;
     text-transform: uppercase;
@@ -668,7 +673,7 @@ div.SingleDatePickerInput {
 }
 
 .leaflet-container a.leaflet-popup-close-button {
-    background-color: #2b383e !important;
+    background-color: var(--blue) !important;
     color: #ffffff !important;
     padding: 0 ! important;
     margin: 0 ! important;
@@ -812,11 +817,11 @@ div.SingleDatePickerInput {
 }
 
 .rc-slider-mark-text-active {
-	color:#F1B545;
+	color:var(--yellow);
 }
 
 .rc-slider-handle{
-	background-color:#F1B545 !important;
+	background-color:var(--yellow) !important;
 	border: none;
 }
 
@@ -825,22 +830,38 @@ div.SingleDatePickerInput {
 	right: 5px;
 }
 
+.leaflet-interactive {
+    cursor: crosshair !important;
+}
+
 /*styles for 404 page*/
+.background {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url(./images/img-bg-404.jpg);
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
 .error_links {
-	color: #F1B545;
-	padding-left: 20px;
+	color: var(--yellow);
 	text-decoration: underline;
+	font-family: "Roboto",sans-serif;
+	font-size: 1.3rem;
 }
 
 #error_title {
-	font-family:"Libre Baskerville", serif;
-	font-size: 4rem;
+	font-family:"Libre Baskerville",serif;
+	font-size: 5rem;
 }
 
 #error_div {
-	position: absolute;
-	top: 30%;
-	left: 40%;
 	text-align:center;
 	color: white;
+	font-size: 1.1rem;
 }
diff --git a/data_handler.py b/data_handler.py
index 0a8e9459e5f012053dacc75db2f68f8d421e5fea..b34f32beeb2f0464528a2d864183b959c172185b 100644
--- a/data_handler.py
+++ b/data_handler.py
@@ -1140,6 +1140,8 @@ class FigureHandler(object):
             ] + layer,
             zoomSnap=0.1,
             zoom=zoom,
+            wheelPxPerZoomLevel=120,
+            wheelDebounceTime=80,
             center=center,
             id=dict(
                 tag=tag_template_map.format(curr_tag),
diff --git a/tabs/forecast.py b/tabs/forecast.py
index 199cf7752b1eafb43aabd2b81525f2ee01e6a85d..baa1291d735baf91584c33ce8af3a84aa3b6b260 100644
--- a/tabs/forecast.py
+++ b/tabs/forecast.py
@@ -385,6 +385,7 @@ def sidebar_forecast(variables, default_var, models, default_model, window='mode
             clearable=False,
             searchable=False,
             optionHeight=50,
+            maxHeight=400
         )],
         className="sidebar-first-item",
     ),
@@ -413,13 +414,6 @@ def sidebar_forecast(variables, default_var, models, default_model, window='mode
                         ),
                         html.Span([
                             html.Button('APPLY', id='models-apply', n_clicks=0),
-                        ]),
-                        #add hidden country fields and  button for gifs over entered coords
-                        html.Span([
-                            dcc.Input(id="country-zoom", type="text", style={'display':'none'}),
-                            dcc.Input(id="country-lat", type="text", style={'display':'none'}),
-                            dcc.Input(id="country-lon", type="text", style={'display':'none'}),
-                            html.Button(id="country-focus", n_clicks=0, style={'display':'none'}),
                         ],
                         )],
                     )