Implemented the TaskGroupListView view and its respective view model in the app target.

App/Resources/Localizable.xcstrings

@@ -110,6 +110,17 @@
           }
         }
       }
+    },
+    "view.task-group-list.navigation.title" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Todos"
+          }
+        }
+      }
     }
   },
   "version" : "1.1"

App/Sources/View Models/ContentViewModel.swift

@@ -11,7 +11,7 @@ extension ContentView {
     /// The view model manages:
     /// - Presentation state for the new task view within a sheet.
     @Observable
-    class ViewModel {
+    final class ViewModel {
 
         // MARK: Properties
 

App/Sources/View Models/NewTaskViewModel.swift

@@ -13,7 +13,7 @@ extension NewTaskView {
     /// - Form validation (ensuring title is not empty)
     /// - Saving the todo to SwiftData model context
     @Observable
-    class ViewModel {
+    final class ViewModel {
 
         // MARK: Properties
 

App/Sources/View Models/TaskGroupListViewModel.swift

@@ -0,0 +1,86 @@
+import SwiftData
+import SwiftUI
+
+extension TaskGroupListView {
+
+    /// View model for managing the logic for the task group list view.
+    ///
+    /// This observable class encapsulates the state and business logic for the task group list view.
+    /// It follows the MVVM pattern to separate presentation logic from the view layer.
+    ///
+    /// ## Responsibilities
+    /// - Providing access to all task groups for iteration
+    /// - Efficiently counting tasks per group using SwiftData fetch descriptors
+    /// - Managing date calculations for group categorization
+    @Observable
+    final class ViewModel {
+
+        // MARK: Properties
+
+        /// The calendar used for date calculations.
+        ///
+        /// This calendar is used to determine day boundaries for categorizing tasks into date groups: today, upcoming, overdue.
+        /// Defaults to the current calendar.
+        private let calendar: Calendar
+
+        // MARK: Initialization
+
+        /// Initializes a new view model instance.
+        ///
+        /// - Parameter calendar: The calendar to use for date calculations. Defaults to `.current`.
+        init(calendar: Calendar = .current) {
+            self.calendar = calendar
+        }
+
+        // MARK: Computed
+
+        /// Returns all available task groups in an predetermined order.
+        ///
+        /// This computed property provides access to all task group cases for iteration in the view.
+        ///
+        /// - Returns: An array of all `TodoGroup` cases in a predetermined order.
+        var groups: [TodoGroup] {
+            TodoGroup.allCases
+        }
+
+        // MARK: Functions
+
+        /// Calculates the number of tasks for a given task group using SwiftData.
+        ///
+        /// This method performs an efficient database-level count using SwiftData's `fetchCount` method with predicate-based filtering.
+        /// Tasks are categorized based on their due date and completion status.
+        ///
+        /// - Parameters:
+        ///   - group: The task group to count tasks for.
+        ///   - modelContext: The SwiftData model context to query.
+        /// - Returns: The number of tasks in the specified group, or 0 if an error occurs.
+        func count(
+            for group: TodoGroup,
+            in modelContext: ModelContext
+        ) -> Int {
+            let today = calendar.startOfDay(for: .now)
+            let tomorrow = calendar.date(byAdding: .day, value: 1, to: today) ?? .now
+
+            let fetchDescriptor: FetchDescriptor<Todo> =
+                switch group {
+                    case .completed:
+                        .init(predicate: #Predicate { $0.completed != nil })
+                    case .overdue:
+                        .init(predicate: #Predicate { $0.completed == nil && $0.due < today })
+                    case .today:
+                        .init(predicate: #Predicate { $0.completed == nil && $0.due >= today && $0.due < tomorrow })
+                    case .upcoming:
+                        .init(predicate: #Predicate { $0.completed == nil && $0.due >= tomorrow })
+                }
+
+            do {
+                return try modelContext.fetchCount(fetchDescriptor)
+            }
+            catch {
+                print("Error fetching count for group \(group): \(error)")
+                return 0
+            }
+        }
+
+    }
+}

App/Sources/Views/TaskGroupListView.swift

@@ -0,0 +1,79 @@
+import SwiftData
+import SwiftUI
+
+/// A view that displays todo tasks grouped by date and completion categories.
+///
+/// This view serves as the main interface for browsing tasks organized into four groups:
+/// - **Today**: Tasks due today that are not yet completed
+/// - **Upcoming**: Tasks due in the future that are not yet completed
+/// - **Overdue**: Tasks due in the past that are not yet completed
+/// - **Completed**: Tasks that have been marked as done
+struct TaskGroupListView: View {
+
+    // MARK: Properties
+
+    /// The SwiftData model context for database operations.
+    ///
+    /// This context is used by the view model to perform efficient database-level queries for counting tasks in each group.
+    @Environment(\.modelContext)
+    private var modelContext
+
+    /// The view model managing the state and logic for this view.
+    ///
+    /// Handles task counting and provides access to all task groups.
+    /// Initialized with the default calendar for date calculations.
+    @State
+    private var viewModel = ViewModel()
+
+    // MARK: Body
+
+    /// The content and behavior of the view.
+    ///
+    /// Displays a scrollable vertical list of task group cards. Each card shows:
+    /// - The group's icon in its associated color
+    /// - The group's title
+    /// - The current count of tasks in that group
+    ///
+    /// Cards are tappable and navigate to a detailed task list for the selected group.
+    /// Task counts are fetched on-demand from the model context for each render.
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 16) {
+                ForEach(viewModel.groups) { group in
+                    NavigationLink(destination: TaskListView(group: group)) {
+                        Card(
+                            group: group,
+                            count: viewModel.count(
+                                for: group,
+                                in: modelContext
+                            )
+                        )
+                    }
+                    .buttonStyle(.plain)
+                }
+            }
+            .padding(.horizontal)
+        }
+        .navigationTitle("view.task-group-list.navigation.title")
+    }
+}
+
+// MARK: - Previews
+
+#Preview(
+    "Task group list with empty tasks",
+    traits: .emptyContainer
+) {
+    NavigationStack {
+        TaskGroupListView()
+    }
+}
+
+#Preview(
+    "Task group list with sample tasks",
+    traits: .sampleTasks
+) {
+    NavigationStack {
+        TaskGroupListView()
+    }
+}