diff --git a/src/App.tsx b/src/App.tsx
index a71f463..ee8ae64 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,7 @@ Warmup: 10:00 30%..60%
 Interval: 20:00 100%
 Rest: 10:00 75%
 Interval: 20:00 100%
-Rest: 10:00 75%
+FreeRide: 10:00
 Cooldown: 10:00 60%..30%
 `;
 
diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
index bb00024..ce980d6 100644
--- a/src/components/Bar.tsx
+++ b/src/components/Bar.tsx
@@ -1,22 +1,23 @@
 import styled from "styled-components";
-import { ZoneIndex } from "make-workout";
+import { ZoneType } from "make-workout";
 
 export type BarProps = {
   // Percentage of total workout length
   durationPercentage: number;
   // Percentage of maximum intensity in workout
   intensityPercentage: number;
-  zone: ZoneIndex;
+  zone: ZoneType;
 };
 
-const zoneColorsMap: Record<ZoneIndex, string> = {
-  0: "#7f7f7f",
-  1: "#338cff",
-  2: "#59bf59",
-  3: "#ffcc3f",
-  4: "#ff6639",
-  5: "#ff330c",
-}
+const zoneColorsMap: Record<ZoneType, string> = {
+  "free": "linear-gradient(to top, rgba(204,204,204,1), rgba(255,255,255,0))",
+  "Z1": "#7f7f7f",
+  "Z2": "#338cff",
+  "Z3": "#59bf59",
+  "Z4": "#ffcc3f",
+  "Z5": "#ff6639",
+  "Z6": "#ff330c",
+};
 
 export const Bar = styled.div<BarProps>`
   display: inline-block;
@@ -25,7 +26,7 @@ export const Bar = styled.div<BarProps>`
   margin-right: 0.1%;
   /* exclude 0.1% margin from bar width */
   width: ${(props) => props.durationPercentage - 0.1}%;
-  height: ${(props) => props.intensityPercentage}%;
+  height: ${(props) => props.zone === "free" ? 100 : props.intensityPercentage}%;
   background: ${(props) => zoneColorsMap[props.zone]};
   transition: width 0.1s, height 0.1s, background-color 0.1s;
 `;
diff --git a/src/components/WorkoutPlot.tsx b/src/components/WorkoutPlot.tsx
index 7b383ee..25b1815 100644
--- a/src/components/WorkoutPlot.tsx
+++ b/src/components/WorkoutPlot.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { Interval, Intensity, Duration, totalDuration, intensityToZoneIndex, maximumIntensity } from "make-workout";
+import { Interval, Intensity, Duration, totalDuration, maximumIntensity } from "make-workout";
 import { BarProps, Bar } from "./Bar";
 
 const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
-  zone: intensityToZoneIndex(interval.intensity),
+  zone: interval.intensity.zone,
   durationPercentage: interval.duration.seconds / workoutDuration.seconds * 100,
   intensityPercentage: interval.intensity.value / maxIntensity.value * 100,
 });