diff --git a/frontend/src/mapstyles/index.js b/frontend/src/mapstyles/index.js
index 9d61e9e..a38826b 100644
--- a/frontend/src/mapstyles/index.js
+++ b/frontend/src/mapstyles/index.js
@@ -33,8 +33,9 @@ export function colormapToScale(colormap, value, min, max) {
 export const viridis = simplifyColormap(viridisBase.map(rgbArrayToColor), 20)
 export const grayscale = ['#FFFFFF', '#000000']
 export const reds = [
-  ['rgba', 255, 0, 0, 0],
-  ['rgba', 255, 0, 0, 1],
+  'rgba( 255, 0, 0, 0)',
+  'rgba( 255, 0, 0, 255)',
+]
 ]
 
 export function colorByCount(attribute = 'event_count', maxCount, colormap = viridis) {
diff --git a/frontend/src/pages/MapPage/LayerSidebar.tsx b/frontend/src/pages/MapPage/LayerSidebar.tsx
index bf23983..d2657f8 100644
--- a/frontend/src/pages/MapPage/LayerSidebar.tsx
+++ b/frontend/src/pages/MapPage/LayerSidebar.tsx
@@ -81,6 +81,7 @@ function LayerSidebar({
               />
             </List.Item>
             {attribute.endsWith('_count') ? (
+             <>
               <List.Item>
                 <List.Header>Maximum value</List.Header>
                 <Input
@@ -90,14 +91,15 @@ function LayerSidebar({
                   onChange={(_e, {value}) => setMapConfigFlag('obsRoads.maxCount', value)}
                 />
               </List.Item>
-            ) : null}
-          </>
-        )}
-        {showRoads && (
-          <>
-            <List.Item>
-              <ColorMapLegend map={_.chunk(colorByDistance('distance_overtaker')[3].slice(3), 2)} />
-            </List.Item>
+              <List.Item>
+                <ColorMapLegend map={_.chunk(colorByCount('obsRoads.maxCount',mapConfig.obsRoads.maxCount, reds).slice(3), 2)} />
+              </List.Item></>
+            ) :
+            (
+              <List.Item>
+                <ColorMapLegend map={_.chunk(colorByDistance('distance_overtaker')[3].slice(3), 2)} />
+              </List.Item>
+            )}
           </>
         )}
         <Divider />