Good Morning/Afternoon/Evening. I'm trying to build a code with a background bar (grey) and above it, we have a ProgressiveBar that starts full and empties as time passes. To be able to stack the elements one above the other I'm trying to use the Zstack function, as shown on the code below, but when simulating the code the progressiveBar is always, on the iPhone screen, showing on top of the background bar, and not above as desired. Could you please review the code below and let me know what I'm missing? `var body: some View { ZStack(alignment: .leading) { // Background bar RoundedRectangle(cornerRadius: 10) .fill(Color.gray.opacity(0.3)) .frame(height: barHeight) // Set height to the specified barHeight // Progress bar GeometryReader { geometry in RoundedRectangle(cornerRadius: 10) .fill(barColor) .frame(width: CGFloat(progress) * geometry.size.width, height: barHeight) .animation(.linear(duration: 1), value: progress) } .cornerRadius(10) // Icon and label HStack { Image(systemName: icon) .foregroundColor(.black) .font(.system(size: 28)) // Increased size .padding(.leading, 8) Spacer() Text(timeString(from: duration * Double(progress))) .foregroundColor(.black) .bold() .font(.system(size: 24)) // Increased size .padding(.trailing, 8) } .frame(width: UIScreen.main.bounds.width * 0.9, height: barHeight) .zIndex(1) // Ensure the HStack is on top } .padding(.horizontal)