unable to align multiple controls in SwiftUI

Question

I'm trying to align controls as shown in "Storyboard" pic using the SwiftUI but not sure why still there is distance between segment control and search-Bar, and also between scan icon and the "Last week activities"

Below is the code of SwiftUI :

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
            ContentViewHeader().background(Color.yellow)
            ContentViewSearchBar().background(Color.cyan)
            ContentViewFilter().background(Color.green)
            ContentViewTableView().background(Color.orange)
        }
    }
}

struct ContentViewHeader: View {
    @State private var favoriteColor = 0
    
  var body: some View {
      VStack {
          Text("Colors & Content ").font(.system(size: 21, weight: .bold, design: .default)).multilineTextAlignment(.leading).padding()
          Spacer()
                  .frame(height: 30)
          Picker("What is your favorite color?", selection: $favoriteColor) {
                          Text("Red").tag(0)
                          Text("Green").tag(1)
                          Text("Blue").tag(2)
         }.pickerStyle(.segmented)
      }
      .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
      .navigationViewStyle(StackNavigationViewStyle())
    }
}


struct ContentViewSearchBar: View {
    @State private var searchText = ""

        var body: some View {
            NavigationView {
                Text("")
                    .searchable(text: $searchText, prompt: "Search")
            }
    }
}

struct ContentViewTableView: View {
    
    var dataTypeList = [
        DataType(name: "Integer", size: "4 bytes", color: .red),
        DataType(name: "Character", size: "1 byte", color: .blue),
        DataType(name: "Float", size: "4 bytes", color: .green),
        DataType(name: "Double", size: "8 bytes", color: .yellow),
        DataType(name: "Integer", size: "4 bytes", color: .red),
        DataType(name: "Character", size: "1 byte", color: .blue),
        DataType(name: "Float", size: "4 bytes", color: .green),
        DataType(name: "Double", size: "8 bytes", color: .yellow),
      ]
    
  var body: some View {
      List(dataTypeList, id: \.name) { dataType in
            HStack {
              Text(dataType.name)
              Text(dataType.size).foregroundColor(dataType.color)
            }
     }
  }
}

struct DataType {
  let name: String
  let size: String
  let color: Color
}

struct ContentViewFilter: View {
  var body: some View {
      HStack {
          Text("           Last week activities                           ").font(.system(size: 10, weight: .bold, design: .default)).padding()
          
          Button(action: {
              // do something here
          }, label: {
                   Image("scan")
          }).frame(width: 40, height: 40, alignment: .center)
      }
  }


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
}

Not sure what correction I need to do in SwiftUI code to so that gaps/distance between segment control and search-bar are removed and even for scan icon also. It should be similar to that of storyboard image.