Merge branch 'replace-list-view-for-api-access-methods-with-a-swiftui-list-ios-1082'

25 files changed, 526 insertions, 305 deletions

diff --git a/ios/MullvadVPN.xcodeproj/project.pbxproj b/ios/MullvadVPN.xcodeproj/project.pbxproj
index 9fed881999..af02794d84 100644
--- a/ios/MullvadVPN.xcodeproj/project.pbxproj
+++ b/ios/MullvadVPN.xcodeproj/project.pbxproj
@@ -235,7 +235,7 @@
 		588527B4276B4F2F00BAA373 /* SetAccountOperation.swift in Sources */ = {isa = PBXBuildFile; fileRef = 588527B3276B4F2F00BAA373 /* SetAccountOperation.swift */; };
 		5888AD83227B11080051EB06 /* LocationCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5888AD82227B11080051EB06 /* LocationCell.swift */; };
 		5888AD87227B17950051EB06 /* LocationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5888AD86227B17950051EB06 /* LocationViewController.swift */; };
-		588D7ED62AF3903F005DF40A /* ListAccessMethodViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 588D7ED52AF3903F005DF40A /* ListAccessMethodViewController.swift */; };
+		588D7ED62AF3903F005DF40A /* ListAccessMethodView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 588D7ED52AF3903F005DF40A /* ListAccessMethodView.swift */; };
 		588D7EDC2AF3A55E005DF40A /* ListAccessMethodInteractorProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = 588D7EDB2AF3A55E005DF40A /* ListAccessMethodInteractorProtocol.swift */; };
 		588D7EDE2AF3A585005DF40A /* ListAccessMethodItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 588D7EDD2AF3A585005DF40A /* ListAccessMethodItem.swift */; };
 		588D7EE02AF3A595005DF40A /* ListAccessMethodInteractor.swift in Sources */ = {isa = PBXBuildFile; fileRef = 588D7EDF2AF3A595005DF40A /* ListAccessMethodInteractor.swift */; };
@@ -1108,12 +1108,18 @@
 		F910A4312D4A1B41002FF3BB /* InAppPurchaseCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = F910A4302D4A1B3B002FF3BB /* InAppPurchaseCoordinator.swift */; };
 		F910A43A2D4A283D002FF3BB /* InAppPurchaseViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = F910A4392D4A2839002FF3BB /* InAppPurchaseViewController.swift */; };
 		F910A8572D523812002FF3BB /* TunnelSettingsV7.swift in Sources */ = {isa = PBXBuildFile; fileRef = F910A8562D523812002FF3BB /* TunnelSettingsV7.swift */; };
-		F924C5A42DA65F28001F4660 /* Storekit2.swift in Sources */ = {isa = PBXBuildFile; fileRef = F924C5A32DA65F28001F4660 /* Storekit2.swift */; };
-		F924C65F2DAE4554001F4660 /* ServerRelayTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = F924C65E2DAE4554001F4660 /* ServerRelayTests.swift */; };
+		F91B94A72DC9EB5E00132C28 /* MullvadInfoHeaderView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F91B94A62DC9EB5E00132C28 /* MullvadInfoHeaderView.swift */; };
 		F924C4532D70692E001F4660 /* MullvadApiTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = F924C4522D706929001F4660 /* MullvadApiTests.swift */; };
+		F924C5A42DA65F28001F4660 /* Storekit2.swift in Sources */ = {isa = PBXBuildFile; fileRef = F924C5A32DA65F28001F4660 /* Storekit2.swift */; };
 		F924C65F2DAE4554001F4660 /* ServerRelayTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = F924C65E2DAE4554001F4660 /* ServerRelayTests.swift */; };
+		F9276C622DBA2103006FE43D /* Font+Mullvad.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9276C612DBA20FC006FE43D /* Font+Mullvad.swift */; };
+		F9394EEC2DBF56B6009595EA /* Color+Mullvad.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9394EEB2DBF56AA009595EA /* Color+Mullvad.swift */; };
+		F9394EED2DBF56B6009595EA /* Color+Mullvad.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9394EEB2DBF56AA009595EA /* Color+Mullvad.swift */; };
+		F9394EF02DC0B58D009595EA /* MullvadListNavigationItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9394EEF2DC0B58D009595EA /* MullvadListNavigationItemView.swift */; };
+		F9394EF32DC21D8C009595EA /* MullvadList.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9394EF22DC21D8C009595EA /* MullvadList.swift */; };
 		F998EFF82D359C4600D88D01 /* SKProduct+Formatting.swift in Sources */ = {isa = PBXBuildFile; fileRef = 58FD5BEF24238EB300112C88 /* SKProduct+Formatting.swift */; };
 		F998EFFA2D3656BA00D88D01 /* SKProduct+Sorting.swift in Sources */ = {isa = PBXBuildFile; fileRef = F998EFF92D3656B100D88D01 /* SKProduct+Sorting.swift */; };
+		F9E3BCF72DD35B78009986C3 /* ListAccessViewModelBridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = F9E3BCF62DD35B78009986C3 /* ListAccessViewModelBridge.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -1849,7 +1855,7 @@
 		588527B3276B4F2F00BAA373 /* SetAccountOperation.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SetAccountOperation.swift; sourceTree = "<group>"; };
 		5888AD82227B11080051EB06 /* LocationCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LocationCell.swift; sourceTree = "<group>"; };
 		5888AD86227B17950051EB06 /* LocationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LocationViewController.swift; sourceTree = "<group>"; };
-		588D7ED52AF3903F005DF40A /* ListAccessMethodViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListAccessMethodViewController.swift; sourceTree = "<group>"; };
+		588D7ED52AF3903F005DF40A /* ListAccessMethodView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListAccessMethodView.swift; sourceTree = "<group>"; };
 		588D7ED72AF3A533005DF40A /* AccessMethodKind.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AccessMethodKind.swift; sourceTree = "<group>"; };
 		588D7EDB2AF3A55E005DF40A /* ListAccessMethodInteractorProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListAccessMethodInteractorProtocol.swift; sourceTree = "<group>"; };
 		588D7EDD2AF3A585005DF40A /* ListAccessMethodItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListAccessMethodItem.swift; sourceTree = "<group>"; };
@@ -2523,11 +2529,16 @@
 		F910A4302D4A1B3B002FF3BB /* InAppPurchaseCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InAppPurchaseCoordinator.swift; sourceTree = "<group>"; };
 		F910A4392D4A2839002FF3BB /* InAppPurchaseViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InAppPurchaseViewController.swift; sourceTree = "<group>"; };
 		F910A8562D523812002FF3BB /* TunnelSettingsV7.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TunnelSettingsV7.swift; sourceTree = "<group>"; };
-		F924C65E2DAE4554001F4660 /* ServerRelayTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ServerRelayTests.swift; sourceTree = "<group>"; };
-		F924C5A32DA65F28001F4660 /* Storekit2.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Storekit2.swift; sourceTree = "<group>"; };
+		F91B94A62DC9EB5E00132C28 /* MullvadInfoHeaderView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MullvadInfoHeaderView.swift; sourceTree = "<group>"; };
 		F924C4522D706929001F4660 /* MullvadApiTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MullvadApiTests.swift; sourceTree = "<group>"; };
+		F924C5A32DA65F28001F4660 /* Storekit2.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Storekit2.swift; sourceTree = "<group>"; };
 		F924C65E2DAE4554001F4660 /* ServerRelayTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ServerRelayTests.swift; sourceTree = "<group>"; };
+		F9276C612DBA20FC006FE43D /* Font+Mullvad.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Font+Mullvad.swift"; sourceTree = "<group>"; };
+		F9394EEB2DBF56AA009595EA /* Color+Mullvad.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Color+Mullvad.swift"; sourceTree = "<group>"; };
+		F9394EEF2DC0B58D009595EA /* MullvadListNavigationItemView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MullvadListNavigationItemView.swift; sourceTree = "<group>"; };
+		F9394EF22DC21D8C009595EA /* MullvadList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MullvadList.swift; sourceTree = "<group>"; };
 		F998EFF92D3656B100D88D01 /* SKProduct+Sorting.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "SKProduct+Sorting.swift"; sourceTree = "<group>"; };
+		F9E3BCF62DD35B78009986C3 /* ListAccessViewModelBridge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListAccessViewModelBridge.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -3315,8 +3326,10 @@
 				F03580242A13842C00E5DAFD /* IncreasedHitButton.swift */,
 				7A9F29382CABFAEC005F2089 /* InfoHeaderView.swift */,
 				7A5869942B32E9C700640D27 /* LinkButton.swift */,
+				F9394EF12DC21D7B009595EA /* List */,
 				7AA1309A2D0048D800640DF9 /* MainButton.swift */,
 				7A0EAE992D01B41500D3EB8B /* MainButtonStyle.swift */,
+				F91B94A62DC9EB5E00132C28 /* MullvadInfoHeaderView.swift */,
 				7A8A190F2CEE3918000BCB5B /* RowSeparator.swift */,
 				58F19E34228C15BA00C7710B /* SpinnerActivityIndicatorView.swift */,
 				7AA130A02D01B1E200640DF9 /* SplitMainButton.swift */,
@@ -3431,6 +3444,8 @@
 		583FE02729C1ADF7006E85F9 /* UI appearance */ = {
 			isa = PBXGroup;
 			children = (
+				F9394EEB2DBF56AA009595EA /* Color+Mullvad.swift */,
+				F9276C612DBA20FC006FE43D /* Font+Mullvad.swift */,
 				58CCA0152242560B004F3011 /* UIColor+Palette.swift */,
 				A9E034632ABB302000E59A5A /* UIEdgeInsets+Extensions.swift */,
 				585CA70E25F8C44600B47C62 /* UIMetrics.swift */,
@@ -3992,11 +4007,12 @@
 		58CEB2EA2AFBBCBA00E6E088 /* List */ = {
 			isa = PBXGroup;
 			children = (
+				F9E3BCF62DD35B78009986C3 /* ListAccessViewModelBridge.swift */,
 				58EFC76D2AFB3BDA00E9F4CB /* ListAccessMethodCoordinator.swift */,
 				588D7EDF2AF3A595005DF40A /* ListAccessMethodInteractor.swift */,
 				588D7EDB2AF3A55E005DF40A /* ListAccessMethodInteractorProtocol.swift */,
 				588D7EDD2AF3A585005DF40A /* ListAccessMethodItem.swift */,
-				588D7ED52AF3903F005DF40A /* ListAccessMethodViewController.swift */,
+				588D7ED52AF3903F005DF40A /* ListAccessMethodView.swift */,
 				5827B0AF2B0F4CCD00CCBBA1 /* ListAccessMethodViewControllerDelegate.swift */,
 			);
 			path = List;
@@ -4881,6 +4897,15 @@
 			path = InAppPurchase;
 			sourceTree = "<group>";
 		};
+		F9394EF12DC21D7B009595EA /* List */ = {
+			isa = PBXGroup;
+			children = (
+				F9394EEF2DC0B58D009595EA /* MullvadListNavigationItemView.swift */,
+				F9394EF22DC21D8C009595EA /* MullvadList.swift */,
+			);
+			path = List;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXHeadersBuildPhase section */
@@ -5910,6 +5935,7 @@
 				7A5869C32B5820CE00640D27 /* IPOverrideRepositoryTests.swift in Sources */,
 				A9A5FA392ACB05910083449F /* UIColor+Palette.swift in Sources */,
 				7A5468AD2C6B5E4B00590086 /* LocationRelays.swift in Sources */,
+				F9394EEC2DBF56B6009595EA /* Color+Mullvad.swift in Sources */,
 				A9A5FA3A2ACB05910083449F /* UIEdgeInsets+Extensions.swift in Sources */,
 				A9A5FA3B2ACB05910083449F /* UIMetrics.swift in Sources */,
 				58B07C182AEFDD6C00A09625 /* StoreTransactionLog.swift in Sources */,
@@ -6217,6 +6243,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				44075DFB2CDA4F7400F61139 /* UDPOverTCPObfuscationSettingsViewModel.swift in Sources */,
+				F9E3BCF72DD35B78009986C3 /* ListAccessViewModelBridge.swift in Sources */,
 				7A6389DC2B7E3BD6008E77E1 /* CustomListViewModel.swift in Sources */,
 				4422C0712CCFF6790001A385 /* UDPOverTCPObfuscationSettingsView.swift in Sources */,
 				7A95B67D2D5F7C5B00687524 /* DAITASettingsCoordinator.swift in Sources */,
@@ -6321,7 +6348,7 @@
 				E158B360285381C60002F069 /* String+AccountFormatting.swift in Sources */,
 				7AC8A3AE2ABC6FBB00DC4939 /* SettingsHeaderView.swift in Sources */,
 				588D7EDC2AF3A55E005DF40A /* ListAccessMethodInteractorProtocol.swift in Sources */,
-				588D7ED62AF3903F005DF40A /* ListAccessMethodViewController.swift in Sources */,
+				588D7ED62AF3903F005DF40A /* ListAccessMethodView.swift in Sources */,
 				7A8A190E2CEB77C1000BCB5B /* SettingsRowViewFooter.swift in Sources */,
 				7A6000FC2B628DF6001CF0D9 /* ListCellContentConfiguration.swift in Sources */,
 				582BB1B1229569620055B6EF /* UINavigationBar+Appearance.swift in Sources */,
@@ -6348,6 +6375,7 @@
 				581DFAEC2B1770C1005D6D1C /* AccessMethodViewModel+NavigationItem.swift in Sources */,
 				58ACF64D26567A5000ACE4B7 /* CustomSwitch.swift in Sources */,
 				F0DA874B2A9CBACB006044F1 /* AccountNumberRow.swift in Sources */,
+				F91B94A72DC9EB5E00132C28 /* MullvadInfoHeaderView.swift in Sources */,
 				7A5869C72B5A8E4C00640D27 /* MethodSettingsDataSourceConfiguration.swift in Sources */,
 				58F2E14C276A61C000A79513 /* RotateKeyOperation.swift in Sources */,
 				5871FB96254ADE4E0051A0A4 /* ConsolidatedApplicationLog.swift in Sources */,
@@ -6371,6 +6399,7 @@
 				7A818F1F29F0305800C7F0F4 /* RootConfiguration.swift in Sources */,
 				7A9CCCBF2A96302800DD6A34 /* SettingsCoordinator.swift in Sources */,
 				58F70FE52AEA707800E6890E /* StoreTransactionLog.swift in Sources */,
+				F9394EF02DC0B58D009595EA /* MullvadListNavigationItemView.swift in Sources */,
 				582AE3102440A6CA00E6733A /* InputTextFormatter.swift in Sources */,
 				7A6F2FAD2AFD3DA7006D0856 /* CustomDNSViewController.swift in Sources */,
 				5820EDAB288FF0D2006BF4E4 /* DeviceRowView.swift in Sources */,
@@ -6432,6 +6461,7 @@
 				5820676426E771DB00655B05 /* TunnelManagerErrors.swift in Sources */,
 				585B4B8726D9098900555C4C /* TunnelStatusNotificationProvider.swift in Sources */,
 				7AF9BE972A41C71F00DBFEDB /* ChipViewCell.swift in Sources */,
+				F9276C622DBA2103006FE43D /* Font+Mullvad.swift in Sources */,
 				063F026628FFE11C001FA09F /* RESTCreateApplePaymentResponse+Localization.swift in Sources */,
 				58DF28A52417CB4B00E836B0 /* StorePaymentManager.swift in Sources */,
 				583DA21425FA4B5C00318683 /* LocationDataSource.swift in Sources */,
@@ -6497,6 +6527,7 @@
 				F910A43A2D4A283D002FF3BB /* InAppPurchaseViewController.swift in Sources */,
 				58607A4D2947287800BC467D /* AccountExpiryInAppNotificationProvider.swift in Sources */,
 				7A8A18FD2CE4BE8D000BCB5B /* CustomToggleStyle.swift in Sources */,
+				F9394EF32DC21D8C009595EA /* MullvadList.swift in Sources */,
 				58C8191829FAA2C400DEB1B4 /* NotificationConfiguration.swift in Sources */,
 				58FF9FE82B07650A00E4C97D /* ButtonCellContentConfiguration.swift in Sources */,
 				7A6652B82BB44C3E0042D848 /* LocationDiffableDataSourceProtocol.swift in Sources */,
@@ -6508,6 +6539,7 @@
 				586C0D832B03D2FF00E7CDD7 /* ShadowsocksSectionHandler.swift in Sources */,
 				58B26E262943522400D5980C /* NotificationProvider.swift in Sources */,
 				58CE5E64224146200008646E /* AppDelegate.swift in Sources */,
+				F9394EED2DBF56B6009595EA /* Color+Mullvad.swift in Sources */,
 				F0DA87492A9CBA9F006044F1 /* AccountDeviceRow.swift in Sources */,
 				58FF9FE42B075BDD00E4C97D /* EditAccessMethodItemIdentifier.swift in Sources */,
 				449E9A6F2D283C7400F8574A /* ButtonPanel.swift in Sources */,
diff --git a/ios/MullvadVPN/Classes/AccessbilityIdentifier.swift b/ios/MullvadVPN/Classes/AccessbilityIdentifier.swift
index 82d9d058cc..63f3c87682 100644
--- a/ios/MullvadVPN/Classes/AccessbilityIdentifier.swift
+++ b/ios/MullvadVPN/Classes/AccessbilityIdentifier.swift
@@ -126,6 +126,7 @@ public enum AccessibilityIdentifier: Equatable {
     case addLocationsView
     case addAccessMethodTableView
     case apiAccessView
+    case apiAccessListView
     case alertContainerView
     case alertTitle
     case appLogsView
diff --git a/ios/MullvadVPN/Coordinators/CustomLists/AddLocationsViewController.swift b/ios/MullvadVPN/Coordinators/CustomLists/AddLocationsViewController.swift
index 368422c360..d6cf5e7ac4 100644
--- a/ios/MullvadVPN/Coordinators/CustomLists/AddLocationsViewController.swift
+++ b/ios/MullvadVPN/Coordinators/CustomLists/AddLocationsViewController.swift
@@ -25,7 +25,7 @@ class AddLocationsViewController: UIViewController {
         let tableView = UITableView()
         tableView.separatorColor = .secondaryColor
         tableView.separatorInset = .zero
-        tableView.rowHeight = 56
+        tableView.rowHeight = UIMetrics.TableView.rowHeight
         tableView.indicatorStyle = .white
         tableView.setAccessibilityIdentifier(.editCustomListEditLocationsTableView)
         return tableView
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodCoordinator.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodCoordinator.swift
index d827b1f29b..804f9b0e34 100644
--- a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodCoordinator.swift
+++ b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodCoordinator.swift
@@ -8,6 +8,7 @@
 
 import MullvadSettings
 import Routing
+import SwiftUI
 import UIKit
 
 class ListAccessMethodCoordinator: Coordinator, Presenting, SettingsChildCoordinator {
@@ -30,11 +31,21 @@ class ListAccessMethodCoordinator: Coordinator, Presenting, SettingsChildCoordin
     }
 
     func start(animated: Bool) {
-        let listController = ListAccessMethodViewController(
-            interactor: ListAccessMethodInteractor(repository: accessMethodRepository)
+        let view = ListAccessMethodView(
+            viewModel: ListAccessViewModelBridge(interactor: ListAccessMethodInteractor(
+                repository: accessMethodRepository
+            ), delegate: self)
         )
-        listController.delegate = self
-        navigationController.pushViewController(listController, animated: animated)
+        let host = UIHostingController(rootView: view)
+        host.title = NSLocalizedString(
+            "NAVIGATION_TITLE",
+            tableName: "Settings",
+            value: "API access",
+            comment: ""
+        )
+        host.view.setAccessibilityIdentifier(.apiAccessView)
+
+        navigationController.pushViewController(host, animated: animated)
     }
 
     private func addNew() {
@@ -68,7 +79,9 @@ class ListAccessMethodCoordinator: Coordinator, Presenting, SettingsChildCoordin
 
     private func popToList() {
         guard let listController = navigationController.viewControllers
-            .first(where: { $0 is ListAccessMethodViewController }) else { return }
+            .first(where: { $0 is UIHostingController<ListAccessMethodView<ListAccessViewModelBridge>> }) else {
+            return
+        }
 
         navigationController.popToViewController(listController, animated: true)
     }
@@ -131,15 +144,15 @@ class ListAccessMethodCoordinator: Coordinator, Presenting, SettingsChildCoordin
 }
 
 extension ListAccessMethodCoordinator: @preconcurrency ListAccessMethodViewControllerDelegate {
-    func controllerShouldShowAbout(_ controller: ListAccessMethodViewController) {
+    func controllerShouldShowAbout() {
         about()
     }
 
-    func controllerShouldAddNew(_ controller: ListAccessMethodViewController) {
+    func controllerShouldAddNew() {
         addNew()
     }
 
-    func controller(_ controller: ListAccessMethodViewController, shouldEditItem item: ListAccessMethodItem) {
+    func controller(shouldEditItem item: ListAccessMethodItem) {
         edit(item: item)
     }
 }
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodInteractor.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodInteractor.swift
index e262f7bcab..bfbf73fb4b 100644
--- a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodInteractor.swift
+++ b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodInteractor.swift
@@ -51,14 +51,7 @@ extension PersistentAccessMethod {
         return ListAccessMethodItem(
             id: id,
             name: itemName,
-            detail: isEnabled
-                ? kind.localizedDescription
-                : NSLocalizedString(
-                    "LIST_ACCESS_METHODS_DISABLED",
-                    tableName: "APIAccess",
-                    value: "Disabled",
-                    comment: ""
-                ),
+            detail: kind.localizedDescription,
             isEnabled: isEnabled
         )
     }
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodView.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodView.swift
new file mode 100644
index 0000000000..8c06bea36e
--- /dev/null
+++ b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodView.swift
@@ -0,0 +1,125 @@
+//
+//  ListAccessMethodViewController.swift
+//  MullvadVPN
+//
+//  Created by pronebird on 02/11/2023.
+//  Copyright © 2025 Mullvad VPN AB. All rights reserved.
+//
+
+import Combine
+import MullvadREST
+import MullvadSettings
+import SwiftUI
+
+protocol ListAccessViewModel: ObservableObject {
+    var items: [ListAccessMethodItem] { get }
+    var itemInUse: ListAccessMethodItem? { get }
+    func addNewMethod()
+    func methodSelected(_ method: ListAccessMethodItem)
+    func showAbout()
+}
+
+struct ListAccessMethodView<ViewModel>: View where ViewModel: ListAccessViewModel {
+    @ObservedObject var viewModel: ViewModel
+
+    init(viewModel: ViewModel) {
+        self.viewModel = viewModel
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            let text = NSLocalizedString(
+                "ACCESS_METHOD_HEADER_BODY",
+                tableName: "APIAccess",
+                value: "Manage default and setup custom methods to access the Mullvad API. ",
+                comment: ""
+            )
+            let about = NSLocalizedString(
+                "ACCESS_METHOD_HEADER_BODY",
+                tableName: "APIAccess",
+                value: "About API access…",
+                comment: ""
+            )
+            MullvadInfoHeaderView(
+                bodyText: text,
+                link: about,
+                onTapLink: viewModel.showAbout
+            )
+            .padding(.horizontal, 16)
+            .padding(.bottom, 16)
+            MullvadList(viewModel.items) { item in
+                let accessibilityId: AccessibilityIdentifier? = switch item.id {
+                case AccessMethodRepository.directId:
+                    AccessibilityIdentifier.accessMethodDirectCell
+                case AccessMethodRepository.bridgeId:
+                    AccessibilityIdentifier.accessMethodBridgesCell
+                case AccessMethodRepository.encryptedDNSId:
+                    AccessibilityIdentifier.accessMethodEncryptedDNSCell
+                default:
+                    nil
+                }
+                let state = viewModel.itemInUse?.id == item.id
+                    ? NSLocalizedString(
+                        "LIST_ACCESS_METHODS_IN_USE_ITEM",
+                        tableName: "APIAccess",
+                        value: "In use",
+                        comment: ""
+                    )
+                    : (
+                        !item.isEnabled
+                            ? NSLocalizedString(
+                                "LIST_ACCESS_METHODS_DISABLED",
+                                tableName: "APIAccess",
+                                value: "Disabled",
+                                comment: ""
+                            )
+                            : nil
+                    )
+                MullvadListNavigationItemView(
+                    item: MullvadListNavigationItem(
+                        id: item.id,
+                        title: item.name,
+                        state: state,
+                        detail: item.detail,
+                        accessibilityIdentifier: accessibilityId
+                    ) {
+                        viewModel.methodSelected(item)
+                    }
+                )
+            }
+            .accessibilityIdentifier(
+                AccessibilityIdentifier.apiAccessListView.asString
+            )
+            .apply {
+                if #available(iOS 16.4, *) {
+                    $0.scrollBounceBehavior(.basedOnSize)
+                } else {
+                    $0
+                }
+            }
+            .padding(.bottom, 24)
+            MainButton(
+                text: LocalizedStringKey("Add"),
+                style: .default
+            ) {
+                viewModel.addNewMethod()
+            }
+            .padding(.horizontal)
+            Spacer()
+        }
+        .background(Color.mullvadBackground)
+    }
+}
+
+#Preview {
+    NavigationView {
+        ListAccessMethodView(
+            viewModel: ListAccessViewModelBridge(
+                interactor: ListAccessMethodInteractor(
+                    repository: AccessMethodRepository()
+                ), delegate: nil
+            )
+        )
+        .navigationTitle("API Access")
+    }
+}
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodViewController.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodViewController.swift
deleted file mode 100644
index d04a532f1c..0000000000
--- a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodViewController.swift
+++ /dev/null
@@ -1,259 +0,0 @@
-//
-//  ListAccessMethodViewController.swift
-//  MullvadVPN
-//
-//  Created by pronebird on 02/11/2023.
-//  Copyright © 2025 Mullvad VPN AB. All rights reserved.
-//
-
-import Combine
-import MullvadREST
-import MullvadSettings
-import UIKit
-
-enum ListAccessMethodSectionIdentifier: Hashable {
-    case primary
-}
-
-struct ListAccessMethodItemIdentifier: Hashable {
-    let id: UUID
-}
-
-/// View controller presenting a list of API access methods.
-class ListAccessMethodViewController: UIViewController, UITableViewDelegate {
-    typealias ListAccessMethodDataSource = UITableViewDiffableDataSource<
-        ListAccessMethodSectionIdentifier,
-        ListAccessMethodItemIdentifier
-    >
-
-    private let interactor: ListAccessMethodInteractorProtocol
-    private var lastReachableMethodItem: ListAccessMethodItem?
-    private var cancellables = Set<AnyCancellable>()
-
-    private var dataSource: ListAccessMethodDataSource?
-    private var fetchedItems: [ListAccessMethodItem] = []
-    private let contentController = UITableViewController(style: .plain)
-    private var tableView: UITableView {
-        contentController.tableView
-    }
-
-    weak var delegate: ListAccessMethodViewControllerDelegate?
-
-    /// Designated initializer.
-    /// - Parameter interactor: the object implementing access and manipulation of the API access list.
-    init(interactor: ListAccessMethodInteractorProtocol) {
-        self.interactor = interactor
-        super.init(nibName: nil, bundle: nil)
-    }
-
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
-    }
-
-    override func viewDidLoad() {
-        super.viewDidLoad()
-
-        view.backgroundColor = .secondaryColor
-
-        tableView.delegate = self
-        tableView.backgroundColor = .secondaryColor
-        tableView.separatorColor = .secondaryColor
-        tableView.separatorInset = .zero
-
-        tableView.registerReusableViews(from: CellReuseIdentifier.self)
-
-        view.setAccessibilityIdentifier(.apiAccessView)
-
-        let headerView = createHeaderView()
-        view.addConstrainedSubviews([headerView, tableView]) {
-            headerView.pinEdgesToSuperviewMargins(PinnableEdges([.leading(8), .trailing(8), .top(0)]))
-            tableView.pinEdgesToSuperview(.all().excluding(.top))
-            tableView.topAnchor.constraint(equalTo: headerView.bottomAnchor, constant: 20)
-        }
-
-        addChild(contentController)
-        contentController.didMove(toParent: self)
-
-        interactor.itemsPublisher.sink { [weak self] _ in
-            self?.updateDataSource(animated: true)
-        }
-        .store(in: &cancellables)
-
-        interactor.itemInUsePublisher.sink { [weak self] item in
-            self?.lastReachableMethodItem = item
-            self?.updateDataSource(animated: true)
-        }
-        .store(in: &cancellables)
-
-        configureNavigationItem()
-        configureDataSource()
-    }
-
-    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
-        guard let itemIdentifier = dataSource?.itemIdentifier(for: indexPath) else { return 0 }
-
-        if itemIdentifier.id == lastReachableMethodItem?.id {
-            return UITableView.automaticDimension
-        } else {
-            return UIMetrics.SettingsCell.apiAccessCellHeight
-        }
-    }
-
-    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
-        let container = UIView()
-
-        let button = AppButton(style: .tableInsetGroupedDefault)
-        button.setTitle(
-            NSLocalizedString(
-                "LIST_ACCESS_METHODS_ADD_BUTTON",
-                tableName: "APIAccess",
-                value: "Add",
-                comment: ""
-            ),
-            for: .normal
-        )
-        button.addAction(UIAction { [weak self] _ in
-            self?.sendAddNew()
-        }, for: .touchUpInside)
-        button.setAccessibilityIdentifier(.addAccessMethodButton)
-
-        let fontSize = button.titleLabel?.font.pointSize ?? 0
-        button.titleLabel?.font = UIFont.systemFont(ofSize: fontSize, weight: .regular)
-
-        container.addConstrainedSubviews([button]) {
-            button.pinEdgesToSuperview(.init([.top(40), .trailing(16), .bottom(0), .leading(16)]))
-        }
-
-        container.directionalLayoutMargins = UIMetrics.SettingsCell.apiAccessInsetLayoutMargins
-
-        return container
-    }
-
-    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
-        let item = fetchedItems[indexPath.row]
-        sendEdit(item: item)
-    }
-
-    private func configureNavigationItem() {
-        navigationItem.title = NSLocalizedString(
-            "NAVIGATION_TITLE",
-            tableName: "Settings",
-            value: "API access",
-            comment: ""
-        )
-    }
-
-    private func createHeaderView() -> InfoHeaderView {
-        let body = NSLocalizedString(
-            "ACCESS_METHOD_HEADER_BODY",
-            tableName: "APIAccess",
-            value: "Manage default and setup custom methods to access the Mullvad API.",
-            comment: ""
-        )
-        let link = NSLocalizedString(
-            "ACCESS_METHOD_HEADER_LINK",
-            tableName: "APIAccess",
-            value: "About API access...",
-            comment: ""
-        )
-
-        let headerView = InfoHeaderView(config: InfoHeaderConfig(body: body, link: link))
-
-        headerView.onAbout = { [weak self] in
-            self?.sendAbout()
-        }
-
-        return headerView
-    }
-
-    private func configureDataSource() {
-        dataSource = ListAccessMethodDataSource(
-            tableView: tableView,
-            cellProvider: { [weak self] _, indexPath, itemIdentifier in
-                self?.dequeueCell(at: indexPath, itemIdentifier: itemIdentifier)
-            }
-        )
-        updateDataSource(animated: false)
-    }
-
-    private func updateDataSource(animated: Bool = true) {
-        guard let dataSource else { return }
-        fetchedItems = interactor.fetch()
-
-        var snapshot = NSDiffableDataSourceSnapshot<ListAccessMethodSectionIdentifier, ListAccessMethodItemIdentifier>()
-        snapshot.appendSections([.primary])
-
-        let itemIdentifiers = fetchedItems.map { item in
-            ListAccessMethodItemIdentifier(id: item.id)
-        }
-        snapshot.appendItems(itemIdentifiers, toSection: .primary)
-
-        if dataSource.snapshot().numberOfItems == fetchedItems.count {
-            for item in fetchedItems {
-                snapshot.reloadItems([ListAccessMethodItemIdentifier(id: item.id)])
-            }
-        }
-
-        dataSource.apply(snapshot, animatingDifferences: animated)
-    }
-
-    private func dequeueCell(
-        at indexPath: IndexPath,
-        itemIdentifier: ListAccessMethodItemIdentifier
-    ) -> UITableViewCell {
-        let cell = tableView.dequeueReusableView(withIdentifier: CellReuseIdentifier.default, for: indexPath)
-        let item = fetchedItems[indexPath.row]
-
-        var contentConfiguration = ListCellContentConfiguration()
-        contentConfiguration.text = item.name
-        contentConfiguration.secondaryText = item.detail
-        contentConfiguration.tertiaryText = lastReachableMethodItem?.id == item.id
-            ? NSLocalizedString("LIST_ACCESS_METHODS_IN_USE_ITEM", tableName: "APIAccess", value: "In use", comment: "")
-            : ""
-        cell.contentConfiguration = contentConfiguration
-
-        if let cell = cell as? DynamicBackgroundConfiguration {
-            cell.setAutoAdaptingBackgroundConfiguration(.mullvadListPlainCell(), selectionType: .dimmed)
-        }
-
-        if let cell = cell as? CustomCellDisclosureHandling {
-            cell.disclosureType = .chevron
-        }
-
-        let accessibilityId: AccessibilityIdentifier? = switch item.id.uuidString {
-        case AccessMethodRepository.directId.uuidString:
-            AccessibilityIdentifier.accessMethodDirectCell
-        case AccessMethodRepository.bridgeId.uuidString:
-            AccessibilityIdentifier.accessMethodBridgesCell
-        case AccessMethodRepository.encryptedDNSId.uuidString:
-            AccessibilityIdentifier.accessMethodEncryptedDNSCell
-        default:
-            nil
-        }
-        cell.setAccessibilityIdentifier(accessibilityId)
-
-        return cell
-    }
-
-    private func sendAddNew() {
-        delegate?.controllerShouldAddNew(self)
-    }
-
-    private func sendAbout() {
-        delegate?.controllerShouldShowAbout(self)
-    }
-
-    private func sendEdit(item: ListAccessMethodItem) {
-        delegate?.controller(self, shouldEditItem: item)
-    }
-}
-
-private enum CellReuseIdentifier: String, CaseIterable, CellIdentifierProtocol {
-    case `default`
-
-    var cellClass: AnyClass {
-        switch self {
-        case .default: BasicCell.self
-        }
-    }
-}
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodViewControllerDelegate.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodViewControllerDelegate.swift
index 26763c5135..f3d5185d92 100644
--- a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodViewControllerDelegate.swift
+++ b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodViewControllerDelegate.swift
@@ -12,17 +12,17 @@ protocol ListAccessMethodViewControllerDelegate: AnyObject {
     /// The view controller requests the delegate to present the about view.
     ///
     /// - Parameter controller: the calling view controller.
-    func controllerShouldShowAbout(_ controller: ListAccessMethodViewController)
+    func controllerShouldShowAbout()
 
     /// The view controller requests the delegate to present the add new method controller.
     ///
     /// - Parameter controller: the calling view controller.
-    func controllerShouldAddNew(_ controller: ListAccessMethodViewController)
+    func controllerShouldAddNew()
 
     /// The view controller requests the delegate to present the view controller for editing the existing access method.
     ///
     /// - Parameters:
     ///   - controller: the calling view controller
     ///   - item: the selected item.
-    func controller(_ controller: ListAccessMethodViewController, shouldEditItem item: ListAccessMethodItem)
+    func controller(shouldEditItem item: ListAccessMethodItem)
 }
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessViewModelBridge.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessViewModelBridge.swift
new file mode 100644
index 0000000000..a6f1e889e3
--- /dev/null
+++ b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessViewModelBridge.swift
@@ -0,0 +1,30 @@
+import SwiftUI
+
+class ListAccessViewModelBridge: ListAccessViewModel {
+    private let interactor: ListAccessMethodInteractorProtocol
+    private weak var delegate: ListAccessMethodViewControllerDelegate?
+
+    @Published var items: [ListAccessMethodItem] = []
+    @Published var itemInUse: ListAccessMethodItem?
+    init(
+        interactor: ListAccessMethodInteractorProtocol,
+        delegate: ListAccessMethodViewControllerDelegate?
+    ) {
+        self.interactor = interactor
+        self.delegate = delegate
+        interactor.itemsPublisher.assign(to: &$items)
+        interactor.itemInUsePublisher.assign(to: &$itemInUse)
+    }
+
+    func addNewMethod() {
+        delegate?.controllerShouldAddNew()
+    }
+
+    func methodSelected(_ method: ListAccessMethodItem) {
+        delegate?.controller(shouldEditItem: method)
+    }
+
+    func showAbout() {
+        delegate?.controllerShouldShowAbout()
+    }
+}
diff --git a/ios/MullvadVPN/Coordinators/Settings/SettingsCoordinator.swift b/ios/MullvadVPN/Coordinators/Settings/SettingsCoordinator.swift
index 52a0b36b0f..dae1b67605 100644
--- a/ios/MullvadVPN/Coordinators/Settings/SettingsCoordinator.swift
+++ b/ios/MullvadVPN/Coordinators/Settings/SettingsCoordinator.swift
@@ -268,7 +268,7 @@ final class SettingsCoordinator: Coordinator, Presentable, Presenting, SettingsV
             return .vpnSettings
         case is ProblemReportViewController:
             return .problemReport
-        case is ListAccessMethodViewController:
+        case is UIHostingController<ListAccessMethodView<ListAccessViewModelBridge>>:
             return .apiAccess
         default:
             return nil
diff --git a/ios/MullvadVPN/UI appearance/Color+Mullvad.swift b/ios/MullvadVPN/UI appearance/Color+Mullvad.swift
new file mode 100644
index 0000000000..5d6cd0da42
--- /dev/null
+++ b/ios/MullvadVPN/UI appearance/Color+Mullvad.swift
@@ -0,0 +1,31 @@
+import SwiftUI
+
+extension Color {
+    private static let mullvadPrimaryColor = UIColor.primaryColor.color
+    private static let mullvadSecondaryColor = UIColor.secondaryColor.color
+    private static let mullvadWarningColor = UIColor.warningColor.color
+    private static let mullvadDangerColor = UIColor.dangerColor.color
+    private static let mullvadSuccessColor = UIColor.successColor.color
+
+    static let mullvadBackground: Color = .mullvadSecondaryColor
+    static let mullvadTextPrimary: Color = UIColor.primaryTextColor.color
+    static let mullvadTextPrimaryDisabled: Color = .mullvadPrimaryColor.opacity(
+        0.2
+    )
+
+    enum MullvadButton {
+        static let primary: Color = .mullvadPrimaryColor
+        static let primaryPressed = Color(red: 0.12, green: 0.23, blue: 0.34)
+        static let primaryDisabled = primaryPressed
+        static let danger: Color = .mullvadDangerColor
+        static let dangerPressed = Color(red: 0.42, green: 0.21, blue: 0.25)
+        static let dangerDisabled = dangerPressed
+        static let positive: Color = .mullvadSuccessColor
+        static let positivePressed = Color(red: 0.16, green: 0.38, blue: 0.28)
+        static let positiveDisabled = positivePressed
+    }
+
+    enum MullvadList {
+        static let separator: Color = .mullvadSecondaryColor
+    }
+}
diff --git a/ios/MullvadVPN/UI appearance/Font+Mullvad.swift b/ios/MullvadVPN/UI appearance/Font+Mullvad.swift
new file mode 100644
index 0000000000..9a77d6d690
--- /dev/null
+++ b/ios/MullvadVPN/UI appearance/Font+Mullvad.swift
@@ -0,0 +1,25 @@
+import SwiftUI
+
+extension Font {
+    static let mullvadBig: Font = .largeTitle.bold()
+    static let mullvadLarge: Font = .title.bold()
+    static let mullvadMedium: Font = .title3.weight(.semibold)
+    static let mullvadSmall: Font = .body
+    static let mullvadSmallSemiBold: Font = mullvadSmall.weight(.semibold)
+    static let mullvadTiny: Font = .subheadline
+    static let mullvadTinySemiBold: Font = .mullvadTiny.weight(.semibold)
+    static let mullvadMini: Font = .footnote
+    static let mullvadMiniSemiBold: Font = mullvadMini.weight(.semibold)
+}
+
+extension UIFont {
+    static let mullvadBig: UIFont = .preferredFont(forTextStyle: .largeTitle, weight: .bold)
+    static let mullvadLarge: UIFont = .preferredFont(forTextStyle: .title1, weight: .bold)
+    static let mullvadMedium: UIFont = .preferredFont(forTextStyle: .title3, weight: .semibold)
+    static let mullvadSmall: UIFont = .preferredFont(forTextStyle: .body)
+    static let mullvadSmallSemiBold: UIFont = .preferredFont(forTextStyle: .body, weight: .semibold)
+    static let mullvadTiny: UIFont = .preferredFont(forTextStyle: .subheadline)
+    static let mullvadTinySemiBold: UIFont = .preferredFont(forTextStyle: .subheadline, weight: .semibold)
+    static let mullvadMini: UIFont = .preferredFont(forTextStyle: .footnote)
+    static let mullvadMiniSemiBold: UIFont = .preferredFont(forTextStyle: .footnote, weight: .semibold)
+}
diff --git a/ios/MullvadVPN/UI appearance/UIColor+Palette.swift b/ios/MullvadVPN/UI appearance/UIColor+Palette.swift
index 14ed92c90f..faee4c4ce0 100644
--- a/ios/MullvadVPN/UI appearance/UIColor+Palette.swift
+++ b/ios/MullvadVPN/UI appearance/UIColor+Palette.swift
@@ -95,7 +95,7 @@ extension UIColor {
             static let indentationLevelTwo = UIColor(red: 0.11, green: 0.20, blue: 0.31, alpha: 1.0)
             static let indentationLevelThree = UIColor(red: 0.11, green: 0.19, blue: 0.29, alpha: 1.0)
 
-            static let normal = indentationLevelZero
+            static let normal = UIColor.primaryColor
             static let disabled = normal.darkened(by: 0.1)!
             static let selected = successColor
             static let disabledSelected = selected.darkened(by: 0.3)!
diff --git a/ios/MullvadVPN/UI appearance/UIMetrics.swift b/ios/MullvadVPN/UI appearance/UIMetrics.swift
index 4f4c1142cc..47e83662dc 100644
--- a/ios/MullvadVPN/UI appearance/UIMetrics.swift
+++ b/ios/MullvadVPN/UI appearance/UIMetrics.swift
@@ -12,6 +12,8 @@ import UIKit
 
 enum UIMetrics {
     enum TableView {
+        /// Height of a cell.
+        static let rowHeight: CGFloat = 56
         /// Height for separators between cells and/or sections.
         static let separatorHeight: CGFloat = 0.33
         /// Spacing used between distinct sections of views
diff --git a/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift b/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift
index e3cbedaf05..ba1958998c 100644
--- a/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift
+++ b/ios/MullvadVPN/View controllers/SelectLocation/LocationCell.swift
@@ -252,7 +252,7 @@ class LocationCell: UITableViewCell {
         case 3:
             return UIColor.Cell.Background.indentationLevelThree
         default:
-            return UIColor.Cell.Background.normal
+            return UIColor.Cell.Background.indentationLevelZero
         }
     }
 
diff --git a/ios/MullvadVPN/View controllers/SelectLocation/LocationViewController.swift b/ios/MullvadVPN/View controllers/SelectLocation/LocationViewController.swift
index bdae59b546..8f1336ff21 100644
--- a/ios/MullvadVPN/View controllers/SelectLocation/LocationViewController.swift
+++ b/ios/MullvadVPN/View controllers/SelectLocation/LocationViewController.swift
@@ -171,8 +171,8 @@ final class LocationViewController: UIViewController {
         tableView.backgroundColor = view.backgroundColor
         tableView.separatorColor = .secondaryColor
         tableView.separatorInset = .zero
-        tableView.rowHeight = 56
-        tableView.sectionHeaderHeight = 56
+        tableView.rowHeight = UIMetrics.TableView.rowHeight
+        tableView.sectionHeaderHeight = UIMetrics.TableView.rowHeight
         tableView.indicatorStyle = .white
         tableView.keyboardDismissMode = .onDrag
         tableView.setAccessibilityIdentifier(.selectLocationTableView)
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift b/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift
index 3becd35d1f..c144967637 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift
@@ -14,7 +14,7 @@ class SettingsAddDNSEntryCell: SettingsCell {
     override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
         super.init(style: style, reuseIdentifier: reuseIdentifier)
 
-        backgroundView?.backgroundColor = UIColor.Cell.Background.indentationLevelTwo
+        backgroundView?.backgroundColor = UIColor.Cell.Background.indentationLevelZero
 
         let gestureRecognizer = UITapGestureRecognizer(
             target: self,
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift b/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift
index 8de8c014e1..569e01be0d 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift
@@ -168,7 +168,7 @@ class SettingsCell: UITableViewCell, CustomCellDisclosureHandling {
 
     func applySubCellStyling() {
         contentView.layoutMargins.left = subCellLeadingIndentation
-        backgroundView?.backgroundColor = UIColor.Cell.Background.indentationLevelOne
+        backgroundView?.backgroundColor = UIColor.Cell.Background.indentationLevelZero
     }
 
     func setLeadingView(superviewProvider: (UIView) -> Void) {
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsDNSTextCell.swift b/ios/MullvadVPN/View controllers/Settings/SettingsDNSTextCell.swift
index ff8b1991ab..b335d686d7 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsDNSTextCell.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsDNSTextCell.swift
@@ -114,7 +114,7 @@ class SettingsDNSTextCell: SettingsCell, UITextFieldDelegate {
             textField.textMargins.left = UIMetrics.SettingsCell.textFieldNonEditingContentInsetLeft
 
             textField.textColor = .white
-            backgroundView?.backgroundColor = UIColor.Cell.Background.indentationLevelOne
+            backgroundView?.backgroundColor = UIColor.Cell.Background.indentationLevelZero
         }
     }
 
diff --git a/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift b/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift
index 07e547b68e..6449dbf6d5 100644
--- a/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift
@@ -200,7 +200,7 @@ struct SingleChoiceList<Value>: View where Value: Equatable {
         .background(
             isSelected
                 ? Color(UIColor.Cell.Background.selected)
-                : Color(UIColor.Cell.Background.indentationLevelOne)
+                : Color(UIColor.Cell.Background.indentationLevelZero)
         )
         .foregroundColor(Color(UIColor.Cell.titleTextColor))
     }
diff --git a/ios/MullvadVPN/Views/List/MullvadList.swift b/ios/MullvadVPN/Views/List/MullvadList.swift
new file mode 100644
index 0000000000..51b9fe808b
--- /dev/null
+++ b/ios/MullvadVPN/Views/List/MullvadList.swift
@@ -0,0 +1,68 @@
+import SwiftUI
+
+/// A plain simple list.
+/// * separators reaching all the way
+/// * the height of all items in the list are based on the highest element
+/// * the list is not higher than all its items
+/// * transparent background
+struct MullvadList<Content: View, Data: RandomAccessCollection<ID>, ID: Hashable>: View {
+    let data: Data
+    let content: (Data.Element) -> Content
+    let id: KeyPath<Data.Element, ID>?
+
+    @State var itemHeight: CGFloat = 0
+    var maxListHeight: CGFloat {
+        var height = itemHeight * CGFloat(data.count)
+        return height > 0 ? height : .infinity
+    }
+
+    init(_ data: Data, id: KeyPath<Data.Element, ID>, @ViewBuilder content: @escaping (Data.Element) -> Content) {
+        self.data = data
+        self.id = id
+        self.content = content
+    }
+
+    init(_ data: Data, @ViewBuilder content: @escaping (Data.Element) -> Content) {
+        self.data = data
+        self.content = content
+        self.id = nil
+    }
+
+    var body: some View {
+        List(data, id: id ?? \.self) { item in
+            content(item)
+                .sizeOfView { size in
+                    if itemHeight < size.height {
+                        itemHeight = size.height
+                    }
+                }
+                .listRowInsets(.init())
+                .listSectionSeparator(.hidden, edges: .bottom)
+                .listRowSeparatorTint(.MullvadList.separator)
+                .listRowBackground(Color.clear)
+                .apply {
+                    if #available(iOS 16.0, *) {
+                        $0.alignmentGuide(.listRowSeparatorLeading) { _ in
+                            0
+                        }
+                    } else {
+                        $0
+                    }
+                }
+                .frame(height: itemHeight)
+        }
+        .listStyle(.plain)
+        .frame(maxHeight: maxListHeight)
+    }
+}
+
+#Preview {
+    MullvadList([1, 2, 3]) { item in
+        VStack {
+            ForEach(0 ..< item, id: \.self) {
+                Text("\($0)")
+            }
+        }
+        .padding()
+    }
+}
diff --git a/ios/MullvadVPN/Views/List/MullvadListNavigationItemView.swift b/ios/MullvadVPN/Views/List/MullvadListNavigationItemView.swift
new file mode 100644
index 0000000000..0d5223f145
--- /dev/null
+++ b/ios/MullvadVPN/Views/List/MullvadListNavigationItemView.swift
@@ -0,0 +1,122 @@
+import SwiftUI
+
+struct MullvadListNavigationItem: Hashable, Identifiable {
+    let id: UUID
+    let title: String
+    let state: String?
+    let detail: String?
+    let accessibilityIdentifier: AccessibilityIdentifier?
+    let didSelect: (() -> Void)?
+
+    func hash(into hasher: inout Hasher) {
+        hasher.combine(id)
+        hasher.combine(title)
+        hasher.combine(state)
+        hasher.combine(detail)
+    }
+
+    static func == (lhs: MullvadListNavigationItem, rhs: MullvadListNavigationItem) -> Bool {
+        lhs.id == rhs.id
+    }
+}
+
+struct MullvadListNavigationItemView: View {
+    private let title: String
+    private let state: String?
+    private let detail: String?
+    private let accessibilityIdentifier: AccessibilityIdentifier?
+    private let didSelect: (() -> Void)?
+    @State private var isPressed = false
+    init(
+        item: MullvadListNavigationItem
+    ) {
+        self.title = item.title
+        self.state = item.state.flatMap { $0.isEmpty ? nil : $0 }
+        self.detail = item.detail.flatMap { $0.isEmpty ? nil : $0 }
+        self.accessibilityIdentifier = item.accessibilityIdentifier
+        self.didSelect = item.didSelect
+    }
+
+    var body: some View {
+        Button {
+            didSelect?()
+        } label: {
+            HStack {
+                VStack(alignment: .leading, spacing: 4) {
+                    Text(title)
+                        .foregroundStyle(Color(.Cell.titleTextColor))
+                        .font(.mullvadSmallSemiBold)
+                    if let detail {
+                        Text(detail)
+                            .foregroundStyle(Color(.Cell.detailTextColor.withAlphaComponent(0.6)))
+                            .font(.mullvadMiniSemiBold)
+                    }
+                }
+                Spacer()
+                if let state {
+                    Text(state)
+                        .foregroundStyle(Color(.Cell.titleTextColor.withAlphaComponent(0.6)))
+                        .font(.mullvadTiny)
+                }
+                Image(.iconChevron)
+            }
+            .padding(.horizontal, 16)
+            .padding(.vertical, 12)
+            .frame(minHeight: UIMetrics.TableView.rowHeight, maxHeight: .infinity)
+            .background(
+                isPressed ? Color.MullvadButton.primaryPressed : Color.MullvadButton
+                    .primary
+            )
+        }
+        .accessibilityIdentifier(accessibilityIdentifier?.asString ?? "")
+        .onButtonPressedChange { isPressed in
+            self.isPressed = isPressed
+        }
+    }
+}
+
+fileprivate extension View {
+    func onButtonPressedChange(_ onChange: @escaping (Bool) -> Void) -> some View {
+        buttonStyle(
+            MullvadListButtonStyle(onButtonPressedChange: onChange)
+        )
+    }
+}
+
+private struct MullvadListButtonStyle: ButtonStyle {
+    let onButtonPressedChange: (Bool) -> Void
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .onChange(of: configuration.isPressed) { newValue in
+                onButtonPressedChange(newValue)
+            }
+    }
+}
+
+#Preview {
+    Text("")
+        .sheet(isPresented: .constant(true)) {
+            MullvadList(
+                [
+                    MullvadListNavigationItem(
+                        id: UUID(),
+                        title: "Test method",
+                        state: "In use",
+                        detail: "Very good method",
+                        accessibilityIdentifier: nil,
+                        didSelect: { print("selected") }
+                    ),
+                    MullvadListNavigationItem(
+                        id: UUID(),
+                        title: "Test method2",
+                        state: "In use",
+                        detail: nil,
+                        accessibilityIdentifier: nil,
+                        didSelect: { print("selected") }
+                    ),
+                ]
+            ) { item in
+                MullvadListNavigationItemView(item: item)
+            }
+        }
+}
diff --git a/ios/MullvadVPN/Views/MainButtonStyle.swift b/ios/MullvadVPN/Views/MainButtonStyle.swift
index e2f510431d..0ffd239861 100644
--- a/ios/MullvadVPN/Views/MainButtonStyle.swift
+++ b/ios/MullvadVPN/Views/MainButtonStyle.swift
@@ -21,8 +21,8 @@ struct MainButtonStyle: ButtonStyle {
             .frame(minHeight: 44)
             .foregroundColor(
                 isEnabled
-                    ? UIColor.primaryTextColor.color
-                    : UIColor.primaryTextColor.withAlphaComponent(0.2).color
+                    ? .mullvadTextPrimary
+                    : .mullvadTextPrimaryDisabled
             )
             .background(
                 isEnabled
@@ -44,20 +44,34 @@ extension MainButtonStyle {
         var color: Color {
             switch self {
             case .default:
-                UIColor.primaryColor.color
+                Color.MullvadButton.primary
             case .danger:
-                UIColor.dangerColor.color
+                Color.MullvadButton.danger
             case .success:
-                UIColor.successColor.color
+                Color.MullvadButton.positive
             }
         }
 
         var pressedColor: Color {
-            color.darkened(by: 0.4)!
+            switch self {
+            case .default:
+                Color.MullvadButton.primaryPressed
+            case .danger:
+                Color.MullvadButton.dangerPressed
+            case .success:
+                Color.MullvadButton.positivePressed
+            }
         }
 
         var disabledColor: Color {
-            color.darkened(by: 0.6)!
+            switch self {
+            case .default:
+                Color.MullvadButton.primaryDisabled
+            case .danger:
+                Color.MullvadButton.dangerDisabled
+            case .success:
+                Color.MullvadButton.positiveDisabled
+            }
         }
     }
 }
diff --git a/ios/MullvadVPN/Views/MullvadInfoHeaderView.swift b/ios/MullvadVPN/Views/MullvadInfoHeaderView.swift
new file mode 100644
index 0000000000..3fcbb1f409
--- /dev/null
+++ b/ios/MullvadVPN/Views/MullvadInfoHeaderView.swift
@@ -0,0 +1,24 @@
+import SwiftUI
+
+struct MullvadInfoHeaderView: View {
+    let bodyText: String
+    let link: String
+
+    let onTapLink: (() -> Void)?
+
+    var body: some View {
+        var headerText: AttributedString {
+            var bodyText = AttributedString(bodyText)
+            bodyText.foregroundColor = Color(.ContentHeading.textColor)
+            var link = AttributedString(link)
+            link.foregroundColor = Color(.ContentHeading.linkColor)
+            return bodyText + link
+        }
+        Button {
+            onTapLink?()
+        } label: {
+            Text(headerText)
+                .multilineTextAlignment(.leading)
+        }
+    }
+}
diff --git a/ios/MullvadVPNUITests/Pages/APIAccessPage.swift b/ios/MullvadVPNUITests/Pages/APIAccessPage.swift
index 1ea3a19784..b70e5c9d24 100644
--- a/ios/MullvadVPNUITests/Pages/APIAccessPage.swift
+++ b/ios/MullvadVPNUITests/Pages/APIAccessPage.swift
@@ -23,10 +23,10 @@ class APIAccessPage: Page {
     }
 
     func getAccessMethodCells() -> [XCUIElement] {
-        app.otherElements[AccessibilityIdentifier.apiAccessView].cells.allElementsBoundByIndex
+        app.collectionViews[AccessibilityIdentifier.apiAccessListView].buttons.allElementsBoundByIndex
     }
 
     func getAccessMethodCell(accessibilityId: AccessibilityIdentifier) -> XCUIElement {
-        app.otherElements[AccessibilityIdentifier.apiAccessView].cells[accessibilityId]
+        app.buttons[accessibilityId]
     }
 }