diff --git a/app/src/main/java/org/mozilla/fenix/browser/BaseBrowserFragment.kt b/app/src/main/java/org/mozilla/fenix/browser/BaseBrowserFragment.kt
index 0307b146a..7d97b2167 100644
--- a/app/src/main/java/org/mozilla/fenix/browser/BaseBrowserFragment.kt
+++ b/app/src/main/java/org/mozilla/fenix/browser/BaseBrowserFragment.kt
@@ -571,6 +571,12 @@ abstract class BaseBrowserFragment : Fragment(), UserInteractionHandler, Activit
                             NavGraphDirections.actionGlobalSavedLoginsAuthFragment()
                         findNavController().navigateBlockingForAsyncNavGraph(directions)
                     }
+                },
+                creditCardPickerView = creditCardSelectBar,
+                onManageCreditCards = {
+                    val directions =
+                        NavGraphDirections.actionGlobalCreditCardsSettingFragment()
+                    findNavController().navigateBlockingForAsyncNavGraph(directions)
                 }
             ),
             owner = this,
diff --git a/app/src/main/java/org/mozilla/fenix/components/Core.kt b/app/src/main/java/org/mozilla/fenix/components/Core.kt
index 58dcc90b7..8eccde5ca 100644
--- a/app/src/main/java/org/mozilla/fenix/components/Core.kt
+++ b/app/src/main/java/org/mozilla/fenix/components/Core.kt
@@ -120,6 +120,7 @@ class Core(
             defaultSettings,
             GeckoProvider.getOrCreateRuntime(
                 context,
+                lazyAutofillStorage,
                 lazyPasswordsStorage,
                 trackingProtectionPolicyFactory.createTrackingProtectionPolicy()
             )
@@ -155,6 +156,7 @@ class Core(
             context,
             GeckoProvider.getOrCreateRuntime(
                 context,
+                lazyAutofillStorage,
                 lazyPasswordsStorage,
                 trackingProtectionPolicyFactory.createTrackingProtectionPolicy()
             )
diff --git a/app/src/main/java/org/mozilla/fenix/gecko/GeckoProvider.kt b/app/src/main/java/org/mozilla/fenix/gecko/GeckoProvider.kt
index 5bb1d3ac9..ef3a1f711 100644
--- a/app/src/main/java/org/mozilla/fenix/gecko/GeckoProvider.kt
+++ b/app/src/main/java/org/mozilla/fenix/gecko/GeckoProvider.kt
@@ -5,19 +5,21 @@
 package org.mozilla.fenix.gecko
 
 import android.content.Context
-import mozilla.components.browser.engine.gecko.autofill.GeckoLoginDelegateWrapper
+import mozilla.components.browser.engine.gecko.autofill.GeckoAutocompleteStorageDelegate
 import mozilla.components.browser.engine.gecko.ext.toContentBlockingSetting
 import mozilla.components.browser.engine.gecko.glean.GeckoAdapter
 import mozilla.components.concept.engine.EngineSession.TrackingProtectionPolicy
+import mozilla.components.concept.storage.CreditCardsAddressesStorage
 import mozilla.components.concept.storage.LoginsStorage
 import mozilla.components.lib.crash.handler.CrashHandlerService
+import mozilla.components.service.sync.autofill.GeckoCreditCardsAddressesStorageDelegate
 import mozilla.components.service.sync.logins.GeckoLoginStorageDelegate
 import org.mozilla.fenix.Config
 import org.mozilla.fenix.ext.components
-import org.mozilla.geckoview.GeckoRuntime
-import org.mozilla.geckoview.GeckoRuntimeSettings
 import org.mozilla.geckoview.ContentBlocking
 import org.mozilla.geckoview.ContentBlocking.SafeBrowsingProvider
+import org.mozilla.geckoview.GeckoRuntime
+import org.mozilla.geckoview.GeckoRuntimeSettings
 
 object GeckoProvider {
     private var runtime: GeckoRuntime? = null
@@ -29,11 +31,13 @@ object GeckoProvider {
     @Synchronized
     fun getOrCreateRuntime(
         context: Context,
-        storage: Lazy<LoginsStorage>,
+        autofillStorage: Lazy<CreditCardsAddressesStorage>,
+        loginStorage: Lazy<LoginsStorage>,
         trackingProtectionPolicy: TrackingProtectionPolicy
     ): GeckoRuntime {
         if (runtime == null) {
-            runtime = createRuntime(context, storage, trackingProtectionPolicy)
+            runtime =
+                createRuntime(context, autofillStorage, loginStorage, trackingProtectionPolicy)
         }
 
         return runtime!!
@@ -41,7 +45,8 @@ object GeckoProvider {
 
     private fun createRuntime(
         context: Context,
-        storage: Lazy<LoginsStorage>,
+        autofillStorage: Lazy<CreditCardsAddressesStorage>,
+        loginStorage: Lazy<LoginsStorage>,
         policy: TrackingProtectionPolicy
     ): GeckoRuntime {
         val builder = GeckoRuntimeSettings.Builder()
@@ -84,9 +89,11 @@ object GeckoProvider {
         }
 
         val geckoRuntime = GeckoRuntime.create(context, runtimeSettings)
-        val loginStorageDelegate = GeckoLoginStorageDelegate(storage)
-        @Suppress("Deprecation")
-        geckoRuntime.loginStorageDelegate = GeckoLoginDelegateWrapper(loginStorageDelegate)
+
+        geckoRuntime.autocompleteStorageDelegate = GeckoAutocompleteStorageDelegate(
+            GeckoCreditCardsAddressesStorageDelegate(autofillStorage),
+            GeckoLoginStorageDelegate(loginStorage)
+        )
 
         return geckoRuntime
     }
diff --git a/app/src/main/res/layout/fragment_browser.xml b/app/src/main/res/layout/fragment_browser.xml
index 32d2bd4c4..cd4c91f5b 100644
--- a/app/src/main/res/layout/fragment_browser.xml
+++ b/app/src/main/res/layout/fragment_browser.xml
@@ -18,7 +18,7 @@
             android:id="@+id/browserLayout"
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            app:layout_constraintBottom_toTopOf="@+id/loginSelectBar"
+            app:layout_constraintBottom_toTopOf="@+id/creditCardSelectBar"
             app:layout_constraintTop_toTopOf="parent"
             tools:context="browser.BrowserFragment">
 
@@ -62,13 +62,21 @@
 
         </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
+        <mozilla.components.feature.prompts.creditcard.CreditCardSelectBar
+            android:visibility="gone"
+            android:id="@+id/creditCardSelectBar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintBottom_toTopOf="@id/loginSelectBar"
+            app:layout_constraintTop_toBottomOf="@id/browserLayout" />
+
         <mozilla.components.feature.prompts.login.LoginSelectBar
             android:visibility="gone"
             android:id="@+id/loginSelectBar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/browserLayout" />
+            app:layout_constraintTop_toBottomOf="@id/creditCardSelectBar" />
     </androidx.constraintlayout.widget.ConstraintLayout>
 
     <org.mozilla.fenix.browser.TabPreview
diff --git a/app/src/main/res/navigation/nav_graph.xml b/app/src/main/res/navigation/nav_graph.xml
index 04257c136..d991377b6 100644
--- a/app/src/main/res/navigation/nav_graph.xml
+++ b/app/src/main/res/navigation/nav_graph.xml
@@ -126,6 +126,9 @@
     <action
         android:id="@+id/action_global_savedLoginsAuthFragment"
         app:destination="@id/savedLoginsAuthFragment" />
+    <action
+        android:id="@+id/action_global_creditCardsSettingFragment"
+        app:destination="@id/credit_cards_graph" />
     <action
         android:id="@+id/action_global_tabHistoryDialogFragment"
         app:destination="@id/tabHistoryDialogFragment" />
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 29f3a95fb..a2e2e7920 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -51,6 +51,7 @@
     <color name="search_suggestion_indicator_icon_color_normal_theme">@color/search_suggestion_indicator_icon_color_dark_theme</color>
     <color name="search_suggestion_indicator_icon_bookmark_color_normal_theme">@color/search_suggestion_indicator_icon_bookmark_color_dark_theme</color>
     <color name="select_login_header_normal_theme">@color/accent_high_contrast_dark_theme</color>
+    <color name="select_credit_card_header_normal_theme">@color/accent_high_contrast_dark_theme</color>
     <color name="preference_section_header_normal_theme">@color/preference_section_header_dark_theme</color>
     <color name="notification_accent_color_normal_theme">@color/accent_high_contrast_dark_theme</color>
     <color name="menu_item_button_normal_theme">@color/accent_high_contrast_dark_theme</color>
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index a5fa3ff87..8f71ae4a4 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -97,6 +97,7 @@
     </declare-styleable>
 
     <attr name="selectLoginHeaderTextColor" format="reference"/>
+    <attr name="selectCreditCardHeaderTextColor" format="reference"/>
 
     <declare-styleable name="TextPercentageSeekBarPreference">
         <attr format="integer" name="min"/>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 3289f2ea9..8c93acea8 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -248,6 +248,7 @@
     <color name="search_suggestion_indicator_icon_color_normal_theme">@color/search_suggestion_indicator_icon_color_light_theme</color>
     <color name="search_suggestion_indicator_icon_bookmark_color_normal_theme">@color/search_suggestion_indicator_icon_bookmark_color_light_theme</color>
     <color name="select_login_header_normal_theme">@color/accent_bright_light_theme</color>
+    <color name="select_credit_card_header_normal_theme">@color/accent_bright_light_theme</color>
     <color name="mozac_widget_favicon_background_normal_theme">@color/mozac_widget_favicon_background_light_theme</color>
     <color name="mozac_widget_favicon_border_normal_theme">@color/mozac_widget_favicon_border_light_theme</color>
     <color name="notification_accent_color_normal_theme">@color/accent_bright_light_theme</color>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index e0074a54d..9d6230374 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -28,6 +28,7 @@
         <item name="mozacInputLayoutErrorIconColor"
             tools:ignore="UnusedResources">@color/destructive_normal_theme</item>
         <item name="mozacLoginSelectHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectLoginHeaderTextStyle</item>
+        <item name="mozacSelectCreditCardHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectCreditCardHeaderTextStyle</item>
 
         <!-- Active thumb color & Active track color (30% transparency) -->
         <item name="colorControlActivated">@color/accent_high_contrast_normal_theme</item>
@@ -81,6 +82,7 @@
         <item name="awesomeBarIndicatorColor">@color/search_suggestion_indicator_icon_color_normal_theme</item>
         <item name="awesomeBarIndicatorBookmarkColor">@color/search_suggestion_indicator_icon_bookmark_color_normal_theme</item>
         <item name="selectLoginHeaderTextColor">@color/select_login_header_normal_theme</item>
+        <item name="selectCreditCardHeaderTextColor">@color/select_credit_card_header_normal_theme</item>
         <item name="preferenceSectionHeader">@color/preference_section_header_normal_theme</item>
         <item name="menuItemButtonTintColor">@color/menu_item_button_normal_theme</item>
         <item name="recentlyUsedShareMenu">@color/recently_used_share_theme</item>
@@ -137,6 +139,11 @@
         <item name="drawableTint">?accentHighContrast</item>
     </style>
 
+    <style name="SelectCreditCardHeaderTextStyle" parent="Header16TextStyle">
+        <item name="android:textColor">?selectCreditCardHeaderTextColor</item>
+        <item name="drawableTint">?accentHighContrast</item>
+    </style>
+
     <style name="Checkable.Colored" parent="Theme.AppCompat">
         <item name="colorControlActivated">?attr/onboardingSelected</item>
         <item name="colorControlNormal">?attr/onboardingDeselected</item>
@@ -186,6 +193,7 @@
         <item name="mozacInputLayoutErrorIconColor"
             tools:ignore="UnusedResources">@color/destructive_private_theme</item>
         <item name="mozacLoginSelectHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectLoginHeaderTextStyle</item>
+        <item name="mozacSelectCreditCardHeaderTextStyle" tools:ignore="UnusedResources">@style/SelectCreditCardHeaderTextStyle</item>
 
         <!-- Inactive thumb color -->
         <item name="colorSwitchThumbNormal">@color/toggle_off_knob_dark_theme</item>
@@ -234,6 +242,7 @@
         <item name="awesomeBarIndicatorColor">@color/search_suggestion_indicator_icon_color_dark_theme</item>
         <item name="awesomeBarIndicatorBookmarkColor">@color/search_suggestion_indicator_icon_bookmark_color_dark_theme</item>
         <item name="selectLoginHeaderTextColor">@color/accent_high_contrast_private_theme</item>
+        <item name="selectCreditCardHeaderTextColor">@color/accent_high_contrast_private_theme</item>
         <item name="preferenceSectionHeader">@color/preference_section_header_dark_theme</item>
         <item name="menuItemButtonTintColor">@color/accent_high_contrast_private_theme</item>