diff --git a/app/src/main/java/com/darkrockstudios/apps/fasttrack/screens/fasting/TimeLine.kt b/app/src/main/java/com/darkrockstudios/apps/fasttrack/screens/fasting/TimeLine.kt
index 56e0a39..23427c9 100644
--- a/app/src/main/java/com/darkrockstudios/apps/fasttrack/screens/fasting/TimeLine.kt
+++ b/app/src/main/java/com/darkrockstudios/apps/fasttrack/screens/fasting/TimeLine.kt
@@ -9,7 +9,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Fill
+import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.dp
 import com.darkrockstudios.apps.fasttrack.data.Phase
@@ -36,10 +39,11 @@ fun TimeLine(
 	onPhaseClick: (Phase) -> Unit = {}
 ) {
 	val padding = 16.dp
-	val spacing = 18.dp
+	val spacing = 4.dp // Reduced spacing since rhombuses connect
 	val barSize = 16.dp
 	val needleSize = 3.dp
 	val needleRadius = 4.dp
+	val slantOffset = 8.dp // How much the rhombus leans to the right
 
 	val outlineColor = MaterialTheme.colorScheme.onBackground
 
@@ -77,49 +81,57 @@ fun TimeLine(
 
 		val curPhase = Stages.getCurrentPhase(elapsedHours.hours)
 
-		// Draw the bubbles (phases)
+		val slantOffsetPx = slantOffset.toPx()
+		val barSizePx = barSize.toPx()
+
+		// Draw the rhombuses (phases)
 		Stages.phases.forEachIndexed { index, phase ->
 			val startX = (index * phaseWidth) + (index * spacing.toPx()) + padding.toPx()
 			val startY = padding.toPx()
 
-			// Current phase, thicket orange outline
+			// Create rhombus path (parallelogram leaning right)
+			val rhombusPath = Path().apply {
+				// Top left
+				moveTo(startX + slantOffsetPx, startY - barSizePx / 2)
+				// Top right
+				lineTo(startX + phaseWidth + slantOffsetPx, startY - barSizePx / 2)
+				// Bottom right
+				lineTo(startX + phaseWidth, startY + barSizePx / 2)
+				// Bottom left
+				lineTo(startX, startY + barSizePx / 2)
+				close()
+			}
+
+			// Current phase, thicker orange outline
 			if (curPhase == phase) {
 				// Outline
-				drawLine(
+				drawPath(
+					path = rhombusPath,
 					color = Color(0xFFE67E22),
-					start = Offset(startX, startY),
-					end = Offset(startX + phaseWidth, startY),
-					strokeWidth = barSize.toPx(),
-					cap = StrokeCap.Round
+					style = Stroke(width = 3.dp.toPx())
 				)
 
 				// Current phase - filled
-				drawLine(
+				drawPath(
+					path = rhombusPath,
 					color = gaugeColors[index],
-					start = Offset(startX, startY),
-					end = Offset(startX + phaseWidth, startY),
-					strokeWidth = barSize.toPx() * 0.7f,
-					cap = StrokeCap.Round
+					style = Fill
 				)
 			} else {
 				// Other phases - thinner "onBackground" outline
 
-				// Thinner outline
-				drawLine(
+				// Outline
+				drawPath(
+					path = rhombusPath,
 					color = outlineColor,
-					start = Offset(startX, startY),
-					end = Offset(startX + phaseWidth, startY),
-					strokeWidth = barSize.toPx(),
-					cap = StrokeCap.Round
+					style = Stroke(width = 2.dp.toPx())
 				)
 
 				// Phase color
-				drawLine(
+				drawPath(
+					path = rhombusPath,
 					color = gaugeColors[index],
-					start = Offset(startX, startY),
-					end = Offset(startX + phaseWidth, startY),
-					strokeWidth = barSize.toPx() * 0.8f, // Slightly thinner
-					cap = StrokeCap.Round
+					style = Fill
 				)
 			}
 		}
@@ -160,4 +172,4 @@ fun TimeLine(
 			)
 		}
 	}
-}
+}
\ No newline at end of file