diff --git a/res/drawable/ic_settings.xml b/res/drawable/ic_settings.xml
index 3b9076e..b4341a6 100644
--- a/res/drawable/ic_settings.xml
+++ b/res/drawable/ic_settings.xml
@@ -19,7 +19,7 @@
     android:viewportWidth="960"
     android:viewportHeight="960"
     android:tintMode="multiply"
-    android:tint="@color/color_accent_primary">
+    android:tint="@color/text_color_primary">
     <path
         android:fillColor="@android:color/white"
         android:pathData="M370,880L354,752Q341,747 329.5,740Q318,733 307,725L188,775L78,585L181,507Q180,500 180,493.5Q180,487 180,480Q180,473 180,466.5Q180,460 181,453L78,375L188,185L307,235Q318,227 330,220Q342,213 354,208L370,80L590,80L606,208Q619,213 630.5,220Q642,227 653,235L772,185L882,375L779,453Q780,460 780,466.5Q780,473 780,480Q780,487 780,493.5Q780,500 778,507L881,585L771,775L653,725Q642,733 630,740Q618,747 606,752L590,880L370,880ZM440,800L519,800L533,694Q564,686 590.5,670.5Q617,655 639,633L738,674L777,606L691,541Q696,527 698,511.5Q700,496 700,480Q700,464 698,448.5Q696,433 691,419L777,354L738,286L639,328Q617,305 590.5,289.5Q564,274 533,266L520,160L441,160L427,266Q396,274 369.5,289.5Q343,305 321,327L222,286L183,354L269,418Q264,433 262,448Q260,463 260,480Q260,496 262,511Q264,526 269,541L183,606L222,674L321,632Q343,655 369.5,670.5Q396,686 427,694L440,800ZM482,620Q540,620 581,579Q622,538 622,480Q622,422 581,381Q540,340 482,340Q423,340 382.5,381Q342,422 342,480Q342,538 382.5,579Q423,620 482,620ZM480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480L480,480L480,480L480,480Q480,480 480,480Q480,480 480,480L480,480L480,480Z"/>
diff --git a/res/layout/clock_carousel.xml b/res/layout/clock_carousel.xml
index f6c408b..25af031 100644
--- a/res/layout/clock_carousel.xml
+++ b/res/layout/clock_carousel.xml
@@ -94,6 +94,7 @@
             android:id="@+id/item_card_2"
             android:layout_width="@dimen/clock_carousel_item_card_width"
             android:layout_height="@dimen/clock_carousel_item_card_height"
+            android:alpha="0.0"
             android:layout_gravity="center"
             android:background="@drawable/carousel_item_card_background"/>
 
diff --git a/res/layout/clock_color_and_size_button.xml b/res/layout/clock_color_and_size_button.xml
index ff5a519..d54c33d 100644
--- a/res/layout/clock_color_and_size_button.xml
+++ b/res/layout/clock_color_and_size_button.xml
@@ -14,11 +14,13 @@
         android:layout_height="@dimen/clock_color_size_button_icon_size"
         android:src="@drawable/ic_settings"
         android:importantForAccessibility="no"
+        android:drawableTint="@color/text_color_primary"
         android:layout_marginEnd="@dimen/clock_color_size_button_icon_margin_end"/>
 
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:textColor="@color/color_accent_primary"
+        android:textColor="@color/text_color_primary"
         android:text="@string/clock_color_and_size_title" />
+
 </LinearLayout>
\ No newline at end of file
diff --git a/res/layout/clock_section_view.xml b/res/layout/clock_section_view.xml
index 31f08fc..0632601 100644
--- a/res/layout/clock_section_view.xml
+++ b/res/layout/clock_section_view.xml
@@ -20,7 +20,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal">
 
diff --git a/res/layout/dark_mode_section_view.xml b/res/layout/dark_mode_section_view.xml
index e1b4b81..27550e2 100644
--- a/res/layout/dark_mode_section_view.xml
+++ b/res/layout/dark_mode_section_view.xml
@@ -22,7 +22,7 @@
     android:clickable="true"
     android:gravity="center_vertical"
     android:orientation="horizontal"
-    android:paddingVertical="@dimen/section_vertical_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding">
 
     <TextView
diff --git a/res/layout/grid_section_view.xml b/res/layout/grid_section_view.xml
index ee7b76f..a90ee64 100644
--- a/res/layout/grid_section_view.xml
+++ b/res/layout/grid_section_view.xml
@@ -20,7 +20,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal">
 
diff --git a/res/layout/keyguard_quick_affordance_section_view.xml b/res/layout/keyguard_quick_affordance_section_view.xml
index 458f659..7c5babb 100644
--- a/res/layout/keyguard_quick_affordance_section_view.xml
+++ b/res/layout/keyguard_quick_affordance_section_view.xml
@@ -16,11 +16,11 @@
 -->
 <com.android.customization.picker.quickaffordance.ui.view.KeyguardQuickAffordanceSectionView
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_width="match_parent"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/option_section_vertical_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal">
 
@@ -28,7 +28,8 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
-        android:orientation="vertical">
+        android:orientation="vertical"
+        android:layout_gravity="center">
 
         <TextView
             android:layout_width="match_parent"
@@ -51,6 +52,7 @@
         android:importantForAccessibility="noHideDescendants"
         android:gravity="center"
         android:divider="@drawable/horizontal_divider_14dp"
+        android:layout_gravity="center"
         android:showDividers="middle">
 
         <ImageView
diff --git a/res/layout/more_settings_section_view.xml b/res/layout/more_settings_section_view.xml
index b60bb45..5745a27 100644
--- a/res/layout/more_settings_section_view.xml
+++ b/res/layout/more_settings_section_view.xml
@@ -20,7 +20,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="vertical">
 
diff --git a/res/layout/notification_section.xml b/res/layout/notification_section.xml
index 713624e..c20ffbf 100644
--- a/res/layout/notification_section.xml
+++ b/res/layout/notification_section.xml
@@ -22,7 +22,7 @@
     android:layout_height="wrap_content"
     android:background="?selectableItemBackground"
     android:clickable="true"
-    android:paddingVertical="@dimen/section_top_padding"
+    android:paddingVertical="@dimen/section_padding"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
     android:orientation="horizontal"
     android:gravity="center_vertical">
@@ -31,19 +31,14 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
+        android:layout_gravity="center"
         android:orientation="vertical">
 
         <TextView
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:text="@string/notifications_section_title"
-            style="@style/SectionTitleTextStyle" />
-
-        <TextView
             android:id="@+id/subtitle"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            style="@style/SectionSubtitleTextStyle"/>
+            style="@style/SectionTitleTextStyle"/>
     </LinearLayout>
 
     <Switch
@@ -51,6 +46,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:clickable="false"
+        android:layout_gravity="center"
         style="@style/Switch.SettingsLib"
         tools:ignore="UseSwitchCompatOrMaterialXml" />
 
diff --git a/res/layout/themed_icon_section_view.xml b/res/layout/themed_icon_section_view.xml
index 95be207..84ef3e8 100644
--- a/res/layout/themed_icon_section_view.xml
+++ b/res/layout/themed_icon_section_view.xml
@@ -22,7 +22,7 @@
     android:clickable="true"
     android:orientation="vertical"
     android:paddingHorizontal="@dimen/section_horizontal_padding"
-    android:paddingVertical="@dimen/section_vertical_padding">
+    android:paddingVertical="@dimen/section_padding">
 
     <LinearLayout
         android:layout_width="match_parent"
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 9bcdd56..18b38c8 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -33,7 +33,7 @@
     <dimen name="options_container_width">0dp</dimen>
     <dimen name="option_bottom_margin">8dp</dimen>
     <dimen name="option_padding_horizontal">2dp</dimen>
-    <dimen name="option_tile_width">82dp</dimen>
+    <dimen name="option_tile_width">80dp</dimen>
     <dimen name="option_tile_radius">20dp</dimen>
     <dimen name="option_tile_margin_horizontal">6dp</dimen>
     <dimen name="option_tile_padding_vertical">12dp</dimen>
@@ -168,6 +168,6 @@
     <dimen name="clock_color_size_button_horizontal_padding">12dp</dimen>
     <dimen name="clock_color_size_button_vertical_padding">6dp</dimen>
     <dimen name="clock_color_size_button_corner_radius">16dp</dimen>
-    <dimen name="clock_color_size_button_icon_size">24dp</dimen>
-    <dimen name="clock_color_size_button_icon_margin_end">8dp</dimen>
+    <dimen name="clock_color_size_button_icon_size">20dp</dimen>
+    <dimen name="clock_color_size_button_icon_margin_end">12dp</dimen>
 </resources>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index 01113c4..1f71bd6 100755
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -412,14 +412,6 @@
     <string name="keyguard_quick_affordance_none_selected">None</string>
 
     <!--
-    Title for a section in a list of sections in the settings app that allows the user to modify
-    how notifications behave whilst the device is locked.
-
-    [CHAR LIMIT=32].
-    -->
-    <string name="notifications_section_title">Notifications</string>
-
-    <!--
     Summary for a setting that lets the user toggle between showing or hiding notifications on their
     device's lock screen. This one is shown when the user is allowing notifications to show on their
     device's lock screen.
@@ -443,7 +435,7 @@
 
     [CHAR LIMIT=32].
     -->
-    <string name="more_settings_section_title">More options</string>
+    <string name="more_settings_section_title">More lock screen options</string>
 
     <!--
     Summary for a setting that lets the user access additional settings related to lock screen
@@ -453,7 +445,7 @@
 
     [CHAR LIMIT=64].
     -->
-    <string name="more_settings_section_description">Text on lock screen, Now Playing, and more</string>
+    <string name="more_settings_section_description">Privacy, Now Playing, and more</string>
 
     <!--
     Label for button that lets the user navigate to a full-screen experience of selecting
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 3991b65..87aae10 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -47,6 +47,7 @@
         <item name="colorAccent">@color/accent_color</item>
         <item name="colorSurface">@color/design_default_color_surface</item>
         <item name="colorOnSurface">@color/design_default_color_on_surface</item>
+        <item name="android:textAllCaps">false</item>
     </style>
 
     <!-- Snackbar margin -->
diff --git a/src/com/android/customization/model/color/ColorCustomizationManager.java b/src/com/android/customization/model/color/ColorCustomizationManager.java
index 29f6ba6..790c86f 100644
--- a/src/com/android/customization/model/color/ColorCustomizationManager.java
+++ b/src/com/android/customization/model/color/ColorCustomizationManager.java
@@ -181,7 +181,23 @@
         if (lockWallpaperColors != null && mLockWallpaperColors.equals(mHomeWallpaperColors)) {
             lockWallpaperColors = null;
         }
-        mProvider.fetch(callback, reload, mHomeWallpaperColors, lockWallpaperColors);
+        mProvider.fetch(callback, reload, mHomeWallpaperColors,
+                lockWallpaperColors,  /* shouldUseRevampedUi= */ false);
+    }
+
+    /**
+     * Fetch options function for the customization hub revamped UI
+     *
+     * TODO (b/276417460): refactor to reduce code repetition with the other fetch options function
+     */
+    public void fetchRevampedUIOptions(OptionsFetchedListener<ColorOption> callback,
+            boolean reload) {
+        WallpaperColors lockWallpaperColors = mLockWallpaperColors;
+        if (lockWallpaperColors != null && mLockWallpaperColors.equals(mHomeWallpaperColors)) {
+            lockWallpaperColors = null;
+        }
+        mProvider.fetch(callback, reload, mHomeWallpaperColors,
+                lockWallpaperColors,  /* shouldUseRevampedUi= */ true);
     }
 
     /**
diff --git a/src/com/android/customization/model/color/ColorOptionsProvider.java b/src/com/android/customization/model/color/ColorOptionsProvider.java
index 2803c7b..166b4da 100644
--- a/src/com/android/customization/model/color/ColorOptionsProvider.java
+++ b/src/com/android/customization/model/color/ColorOptionsProvider.java
@@ -70,8 +70,12 @@
      * @param homeWallpaperColors to get seed colors from
      * @param lockWallpaperColors WallpaperColors from the lockscreen wallpaper to get seeds from,
      *                            if different than homeWallpaperColors
+     * @param shouldUseRevampedUi fetches color options with new preview mappings for the revamped
+     *                            UI if set to true
      */
     void fetch(OptionsFetchedListener<ColorOption> callback, boolean reload,
             @Nullable WallpaperColors homeWallpaperColors,
-            @Nullable WallpaperColors lockWallpaperColors);
+            @Nullable WallpaperColors lockWallpaperColors,
+            boolean shouldUseRevampedUi
+    );
 }
diff --git a/src/com/android/customization/model/color/ColorProvider.kt b/src/com/android/customization/model/color/ColorProvider.kt
index f91ec6b..639a886 100644
--- a/src/com/android/customization/model/color/ColorProvider.kt
+++ b/src/com/android/customization/model/color/ColorProvider.kt
@@ -87,7 +87,8 @@
         callback: OptionsFetchedListener<ColorOption>?,
         reload: Boolean,
         homeWallpaperColors: WallpaperColors?,
-        lockWallpaperColors: WallpaperColors?
+        lockWallpaperColors: WallpaperColors?,
+        shouldUseRevampedUi: Boolean
     ) {
         val wallpaperColorsChanged =
             this.homeWallpaperColors != homeWallpaperColors ||
@@ -103,7 +104,11 @@
                         loadPreset()
                     }
                     if (wallpaperColorsChanged || reload) {
-                        loadSeedColors(homeWallpaperColors, lockWallpaperColors)
+                        loadSeedColors(
+                            homeWallpaperColors,
+                            lockWallpaperColors,
+                            shouldUseRevampedUi
+                        )
                     }
                 } catch (e: Throwable) {
                     colorsAvailable = false
@@ -127,7 +132,8 @@
 
     private fun loadSeedColors(
         homeWallpaperColors: WallpaperColors?,
-        lockWallpaperColors: WallpaperColors?
+        lockWallpaperColors: WallpaperColors?,
+        shouldUseRevampedUi: Boolean,
     ) {
         if (homeWallpaperColors == null) return
 
@@ -147,7 +153,8 @@
                 colorsPerSource,
                 if (shouldLockColorsGoFirst) COLOR_SOURCE_LOCK else COLOR_SOURCE_HOME,
                 true,
-                bundles
+                bundles,
+                shouldUseRevampedUi
             )
             // Second half of the colors
             buildColorSeeds(
@@ -155,10 +162,18 @@
                 MAX_SEED_COLORS - bundles.size / styleSize,
                 if (shouldLockColorsGoFirst) COLOR_SOURCE_HOME else COLOR_SOURCE_LOCK,
                 false,
-                bundles
+                bundles,
+                shouldUseRevampedUi
             )
         } else {
-            buildColorSeeds(homeWallpaperColors, colorsPerSource, COLOR_SOURCE_HOME, true, bundles)
+            buildColorSeeds(
+                homeWallpaperColors,
+                colorsPerSource,
+                COLOR_SOURCE_HOME,
+                true,
+                bundles,
+                shouldUseRevampedUi
+            )
         }
 
         bundles.addAll(colorBundles?.filterNot { it is ColorSeedOption } ?: emptyList())
@@ -170,13 +185,14 @@
         maxColors: Int,
         source: String,
         containsDefault: Boolean,
-        bundles: MutableList<ColorOption>
+        bundles: MutableList<ColorOption>,
+        shouldUseRevampedUi: Boolean,
     ) {
         val seedColors = ColorScheme.getSeedColors(wallpaperColors)
         val defaultSeed = seedColors.first()
-        buildBundle(defaultSeed, 0, containsDefault, source, bundles)
+        buildBundle(defaultSeed, 0, containsDefault, source, bundles, shouldUseRevampedUi)
         for ((i, colorInt) in seedColors.drop(1).take(maxColors - 1).withIndex()) {
-            buildBundle(colorInt, i + 1, false, source, bundles)
+            buildBundle(colorInt, i + 1, false, source, bundles, shouldUseRevampedUi)
         }
     }
 
@@ -185,7 +201,8 @@
         i: Int,
         isDefault: Boolean,
         source: String,
-        bundles: MutableList<ColorOption>
+        bundles: MutableList<ColorOption>,
+        shouldUseRevampedUi: Boolean,
     ) {
         // TODO(b/202145216): Measure time cost in the loop.
         for (style in styleList) {
@@ -193,8 +210,14 @@
             val lightColorScheme = ColorScheme(colorInt, /* darkTheme= */ false, style)
             val darkColorScheme = ColorScheme(colorInt, /* darkTheme= */ true, style)
             builder
-                .setLightColors(lightColorScheme.getLightColorPreview())
-                .setDarkColors(darkColorScheme.getDarkColorPreview())
+                .setLightColors(
+                    if (shouldUseRevampedUi) lightColorScheme.getRevampedUILightColorPreview()
+                    else lightColorScheme.getLightColorPreview()
+                )
+                .setDarkColors(
+                    if (shouldUseRevampedUi) darkColorScheme.getRevampedUIDarkColorPreview()
+                    else darkColorScheme.getDarkColorPreview()
+                )
                 .addOverlayPackage(
                     OVERLAY_CATEGORY_SYSTEM_PALETTE,
                     if (isDefault) "" else toColorString(colorInt)
@@ -247,6 +270,30 @@
         return getLightColorPreview()
     }
 
+    @ColorInt
+    private fun ColorScheme.getRevampedUILightColorPreview(): IntArray {
+        return intArrayOf(
+            setAlphaComponent(this.accent1.s600, ALPHA_MASK),
+            setAlphaComponent(this.accent1.s600, ALPHA_MASK),
+            setAlphaComponent(this.accent2.s100, ALPHA_MASK),
+            ColorStateList.valueOf(this.accent3.s500).withLStar(59f).colors[0],
+        )
+    }
+
+    /**
+     * Returns the color for the dark theme version of the preview of a ColorScheme based on this
+     * order: |-------| | 0 | 1 | |---+---| | 2 | 3 | |-------|
+     */
+    @ColorInt
+    private fun ColorScheme.getRevampedUIDarkColorPreview(): IntArray {
+        return intArrayOf(
+            setAlphaComponent(this.accent1.s200, ALPHA_MASK),
+            setAlphaComponent(this.accent1.s200, ALPHA_MASK),
+            setAlphaComponent(this.accent2.s700, ALPHA_MASK),
+            setAlphaComponent(this.accent3.s100, ALPHA_MASK),
+        )
+    }
+
     private fun ColorScheme.getPresetColorPreview(seed: Int): IntArray {
         return when (this.style) {
             Style.FRUIT_SALAD -> intArrayOf(seed, this.accent1.s100)
diff --git a/src/com/android/customization/model/color/ColorSeedOption.java b/src/com/android/customization/model/color/ColorSeedOption.java
index ba61ed1..ed38049 100644
--- a/src/com/android/customization/model/color/ColorSeedOption.java
+++ b/src/com/android/customization/model/color/ColorSeedOption.java
@@ -100,6 +100,7 @@
         /**
          * Returns the colors to be applied corresponding with the current
          * configuration's UI mode.
+         * @param res resources to read to the UI mode configuration from
          * @return one of {@link #lightColors} or {@link #darkColors}
          */
         @ColorInt
@@ -108,6 +109,17 @@
                     == Configuration.UI_MODE_NIGHT_YES;
             return night ? darkColors : lightColors;
         }
+
+        /**
+         * Returns the preview colors based on whether dark theme or light theme colors are
+         * requested.
+         * @param darkTheme if true, returns dark theme colors, otherwise returns light theme colors
+         * @return one of {@link #lightColors} or {@link #darkColors}
+         */
+        @ColorInt
+        public int[] resolveColors(boolean darkTheme) {
+            return darkTheme ? darkColors : lightColors;
+        }
     }
 
     /**
diff --git a/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt b/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt
index 925e293..8d5924e 100644
--- a/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt
+++ b/src/com/android/customization/picker/clock/ui/binder/ClockCarouselViewBinder.kt
@@ -59,6 +59,12 @@
                 }
 
                 launch {
+                    viewModel.allClockIds.collect {
+                        it.forEach { clockId -> clockViewFactory.updateTimeFormat(clockId) }
+                    }
+                }
+
+                launch {
                     viewModel.selectedIndex.collect { selectedIndex ->
                         carouselView.setSelectedClockIndex(selectedIndex)
                     }
@@ -89,7 +95,9 @@
             LifecycleEventObserver { source, event ->
                 when (event) {
                     Lifecycle.Event.ON_RESUME -> {
-                        clockViewFactory.registerTimeTicker(source)
+                        clockViewFactory.registerTimeTicker(source) {
+                            !carouselView.isCarouselInTransition
+                        }
                     }
                     Lifecycle.Event.ON_PAUSE -> {
                         clockViewFactory.unregisterTimeTicker(source)
diff --git a/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt b/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
index 7de45e9..4664bd0 100644
--- a/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
+++ b/src/com/android/customization/picker/clock/ui/binder/ClockSettingsBinder.kt
@@ -15,6 +15,7 @@
  */
 package com.android.customization.picker.clock.ui.binder
 
+import android.content.res.Configuration
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
@@ -67,7 +68,10 @@
                 lifecycleOwner = lifecycleOwner,
                 bindIcon = { foregroundView: View, colorIcon: ColorOptionIconViewModel ->
                     val viewGroup = foregroundView as? ViewGroup
-                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon) }
+                    val night =
+                        (view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
+                            Configuration.UI_MODE_NIGHT_YES)
+                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon, night) }
                 }
             )
         colorOptionContainerView.adapter = colorOptionAdapter
diff --git a/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt b/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
index 48d3de3..a27d019 100644
--- a/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
+++ b/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
@@ -17,7 +17,6 @@
 
 import android.content.Context
 import android.util.AttributeSet
-import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -37,6 +36,8 @@
         attrs,
     ) {
 
+    var isCarouselInTransition = false
+
     private val carousel: Carousel
     private val motionLayout: MotionLayout
     private lateinit var adapter: ClockCarouselAdapter
@@ -70,7 +71,7 @@
                     startId: Int,
                     endId: Int
                 ) {
-                    Log.d("mmpud", "onTransitionStarted")
+                    isCarouselInTransition = true
                     val scalingDownClockId = adapter.clockIds[carousel.currentIndex]
                     val scalingUpIdx =
                         if (endId == R.id.next) (carousel.currentIndex + 1) % adapter.count()
@@ -115,7 +116,9 @@
                     hidingCardView?.alpha = getHidingAlpha(progress)
                 }
 
-                override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {}
+                override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
+                    isCarouselInTransition = false
+                }
 
                 override fun onTransitionTrigger(
                     motionLayout: MotionLayout?,
@@ -158,6 +161,8 @@
 
             clockHostView.removeAllViews()
             val clockView = onGetClockController(clockIds[index]).largeClock.view
+            // Making sure the large clock tick to the correct time
+            onGetClockController(clockIds[index]).largeClock.events.onTimeTick()
             // The clock view might still be attached to an existing parent. Detach before adding to
             // another parent.
             (clockView.parent as? ViewGroup)?.removeView(clockView)
diff --git a/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt b/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt
index 67c7002..cf154d5 100644
--- a/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt
+++ b/src/com/android/customization/picker/clock/ui/view/ClockViewFactory.kt
@@ -21,6 +21,7 @@
 import androidx.annotation.ColorInt
 import androidx.lifecycle.LifecycleOwner
 import com.android.systemui.plugins.ClockController
+import com.android.systemui.plugins.WeatherData
 import com.android.systemui.shared.clocks.ClockRegistry
 import com.android.wallpaper.R
 import com.android.wallpaper.util.ScreenSizeCalculator
@@ -33,7 +34,7 @@
 ) {
     private val timeTickListeners: ConcurrentHashMap<Int, TimeTicker> = ConcurrentHashMap()
     private val clockControllers: HashMap<String, ClockController> = HashMap()
-    private var ticker: TimeTicker? = null
+
     fun getRatio(): Float {
         val screenSizeCalculator = ScreenSizeCalculator.getInstance()
         val screenSize = screenSizeCalculator.getScreenSize(activity.windowManager.defaultDisplay)
@@ -59,17 +60,34 @@
             .onSeedColorChanged(seedColor)
     }
 
+    fun updateTimeFormat(clockId: String) {
+        getController(clockId)
+            .events
+            .onTimeFormatChanged(android.text.format.DateFormat.is24HourFormat(activity))
+    }
+
     fun registerTimeTicker(owner: LifecycleOwner) {
+        registerTimeTicker(owner, null)
+    }
+
+    fun registerTimeTicker(owner: LifecycleOwner, shouldTimeTick: (() -> Boolean)?) {
         val hashCode = owner.hashCode()
         if (timeTickListeners.keys.contains(hashCode)) {
             return
         }
+
         timeTickListeners[hashCode] =
             TimeTicker.registerNewReceiver(activity.applicationContext) {
-                clockControllers.values.forEach { it.largeClock.events.onTimeTick() }
+                if (shouldTimeTick == null || shouldTimeTick()) {
+                    onTimeTick()
+                }
             }
     }
 
+    private fun onTimeTick() {
+        clockControllers.values.forEach { it.largeClock.events.onTimeTick() }
+    }
+
     fun unregisterTimeTicker(owner: LifecycleOwner) {
         val hashCode = owner.hashCode()
         timeTickListeners[hashCode]?.let {
@@ -94,7 +112,23 @@
             activity.resources.getDimensionPixelSize(R.dimen.large_clock_text_size).toFloat() *
                 getRatio()
         )
+        // Use placeholder for weather clock preview in picker
+        controller.events.onWeatherDataChanged(
+            WeatherData(
+                description = DESCRIPTION_PLACEHODLER,
+                state = WEATHERICON_PLACEHOLDER,
+                temperature = TEMPERATURE_PLACEHOLDER,
+                useCelsius = USE_CELSIUS_PLACEHODLER,
+            )
+        )
         clockControllers[clockId] = controller
         return controller
     }
+
+    companion object {
+        val DESCRIPTION_PLACEHODLER = ""
+        val TEMPERATURE_PLACEHOLDER = 58
+        val WEATHERICON_PLACEHOLDER = WeatherData.WeatherStateIcon.MOSTLY_SUNNY
+        val USE_CELSIUS_PLACEHODLER = false
+    }
 }
diff --git a/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt b/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt
index b66f977..a0ac370 100644
--- a/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt
+++ b/src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt
@@ -145,10 +145,14 @@
                             key = MutableStateFlow(colorModel.colorId) as StateFlow<String>,
                             payload =
                                 ColorOptionIconViewModel(
-                                    colorModel.color,
-                                    colorModel.color,
-                                    colorModel.color,
-                                    colorModel.color,
+                                    lightThemeColor0 = colorModel.color,
+                                    lightThemeColor1 = colorModel.color,
+                                    lightThemeColor2 = colorModel.color,
+                                    lightThemeColor3 = colorModel.color,
+                                    darkThemeColor0 = colorModel.color,
+                                    darkThemeColor1 = colorModel.color,
+                                    darkThemeColor2 = colorModel.color,
+                                    darkThemeColor3 = colorModel.color,
                                 ),
                             text =
                                 Text.Loaded(
@@ -200,8 +204,26 @@
         val optionItemPayload =
             when (colorOption) {
                 is ColorSeedOption -> {
-                    val colors = colorOption.previewInfo.resolveColors(context.resources)
-                    ColorOptionIconViewModel(colors[0], colors[1], colors[2], colors[3])
+                    val lightThemeColors =
+                        colorOption.previewInfo.resolveColors(
+                            /** darkTheme= */
+                            false
+                        )
+                    val darkThemeColors =
+                        colorOption.previewInfo.resolveColors(
+                            /** darkTheme= */
+                            true
+                        )
+                    ColorOptionIconViewModel(
+                        lightThemeColor0 = lightThemeColors[0],
+                        lightThemeColor1 = lightThemeColors[1],
+                        lightThemeColor2 = lightThemeColors[2],
+                        lightThemeColor3 = lightThemeColors[3],
+                        darkThemeColor0 = darkThemeColors[0],
+                        darkThemeColor1 = darkThemeColors[1],
+                        darkThemeColor2 = darkThemeColors[2],
+                        darkThemeColor3 = darkThemeColors[3],
+                    )
                 }
                 is ColorBundle -> {
                     val primaryColor =
@@ -209,10 +231,14 @@
                     val secondaryColor =
                         colorOption.previewInfo.resolveSecondaryColor(context.resources)
                     ColorOptionIconViewModel(
-                        primaryColor,
-                        secondaryColor,
-                        primaryColor,
-                        secondaryColor
+                        lightThemeColor0 = primaryColor,
+                        lightThemeColor1 = secondaryColor,
+                        lightThemeColor2 = primaryColor,
+                        lightThemeColor3 = secondaryColor,
+                        darkThemeColor0 = primaryColor,
+                        darkThemeColor1 = secondaryColor,
+                        darkThemeColor2 = primaryColor,
+                        darkThemeColor3 = secondaryColor,
                     )
                 }
                 else -> null
diff --git a/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt b/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt
index 512a500..a044174 100644
--- a/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt
+++ b/src/com/android/customization/picker/color/data/repository/ColorPickerRepositoryImpl.kt
@@ -52,7 +52,7 @@
             .map { (homeColors, lockColors) ->
                 suspendCancellableCoroutine { continuation ->
                     colorManager.setWallpaperColors(homeColors, lockColors)
-                    colorManager.fetchOptions(
+                    colorManager.fetchRevampedUIOptions(
                         object : CustomizationManager.OptionsFetchedListener<ColorOption?> {
                             override fun onOptionsLoaded(options: MutableList<ColorOption?>?) {
                                 val wallpaperColorOptions: MutableList<ColorOptionModel> =
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
index 1478cc4..d238180 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorOptionIconBinder.kt
@@ -28,14 +28,30 @@
     fun bind(
         view: ViewGroup,
         viewModel: ColorOptionIconViewModel,
+        darkTheme: Boolean,
     ) {
         val color0View: ImageView = view.requireViewById(R.id.color_preview_0)
         val color1View: ImageView = view.requireViewById(R.id.color_preview_1)
         val color2View: ImageView = view.requireViewById(R.id.color_preview_2)
         val color3View: ImageView = view.requireViewById(R.id.color_preview_3)
-        color0View.drawable.colorFilter = BlendModeColorFilter(viewModel.color0, BlendMode.SRC)
-        color1View.drawable.colorFilter = BlendModeColorFilter(viewModel.color1, BlendMode.SRC)
-        color2View.drawable.colorFilter = BlendModeColorFilter(viewModel.color2, BlendMode.SRC)
-        color3View.drawable.colorFilter = BlendModeColorFilter(viewModel.color3, BlendMode.SRC)
+        if (darkTheme) {
+            color0View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor0, BlendMode.SRC)
+            color1View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor1, BlendMode.SRC)
+            color2View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor2, BlendMode.SRC)
+            color3View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.darkThemeColor3, BlendMode.SRC)
+        } else {
+            color0View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor0, BlendMode.SRC)
+            color1View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor1, BlendMode.SRC)
+            color2View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor2, BlendMode.SRC)
+            color3View.drawable.colorFilter =
+                BlendModeColorFilter(viewModel.lightThemeColor3, BlendMode.SRC)
+        }
     }
 }
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
index 7623048..452e8b6 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorPickerBinder.kt
@@ -17,6 +17,7 @@
 
 package com.android.customization.picker.color.ui.binder
 
+import android.content.res.Configuration
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
@@ -32,7 +33,6 @@
 import com.android.customization.picker.common.ui.view.ItemSpacing
 import com.android.wallpaper.R
 import com.android.wallpaper.picker.option.ui.adapter.OptionItemAdapter
-import kotlinx.coroutines.flow.collect
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.launch
 
@@ -64,7 +64,10 @@
                 lifecycleOwner = lifecycleOwner,
                 bindIcon = { foregroundView: View, colorIcon: ColorOptionIconViewModel ->
                     val viewGroup = foregroundView as? ViewGroup
-                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon) }
+                    val night =
+                        (view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
+                            Configuration.UI_MODE_NIGHT_YES)
+                    viewGroup?.let { ColorOptionIconBinder.bind(viewGroup, colorIcon, night) }
                 }
             )
         colorOptionContainerView.adapter = colorOptionAdapter
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
index 05b0916..10013e6 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
@@ -17,6 +17,7 @@
 
 package com.android.customization.picker.color.ui.binder
 
+import android.content.res.Configuration
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -91,10 +92,15 @@
                 })
                 .let { if (it < 0) 0 else it }
         options.subList(0, colorOptionSlotSize).forEach { item ->
+            val night =
+                (view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
+                    Configuration.UI_MODE_NIGHT_YES)
             val itemView =
                 LayoutInflater.from(view.context)
                     .inflate(R.layout.color_option_no_background, view, false)
-            item.payload?.let { ColorOptionIconBinder.bind(itemView as ViewGroup, item.payload) }
+            item.payload?.let {
+                ColorOptionIconBinder.bind(itemView as ViewGroup, item.payload, night)
+            }
             val optionSelectedView = itemView.findViewById<ImageView>(R.id.option_selected)
 
             lifecycleOwner.lifecycleScope.launch {
diff --git a/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt b/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt
index d32538d..8723c8c 100644
--- a/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt
+++ b/src/com/android/customization/picker/color/ui/viewmodel/ColorOptionIconViewModel.kt
@@ -20,8 +20,12 @@
 import android.annotation.ColorInt
 
 data class ColorOptionIconViewModel(
-    @ColorInt val color0: Int,
-    @ColorInt val color1: Int,
-    @ColorInt val color2: Int,
-    @ColorInt val color3: Int,
+    @ColorInt val lightThemeColor0: Int,
+    @ColorInt val lightThemeColor1: Int,
+    @ColorInt val lightThemeColor2: Int,
+    @ColorInt val lightThemeColor3: Int,
+    @ColorInt val darkThemeColor0: Int,
+    @ColorInt val darkThemeColor1: Int,
+    @ColorInt val darkThemeColor2: Int,
+    @ColorInt val darkThemeColor3: Int,
 )
diff --git a/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt b/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt
index 73c1ac6..97dbba6 100644
--- a/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt
+++ b/src/com/android/customization/picker/color/ui/viewmodel/ColorPickerViewModel.kt
@@ -101,8 +101,14 @@
                                 colorOptionEntry.value.map { colorOptionModel ->
                                     val colorSeedOption: ColorSeedOption =
                                         colorOptionModel.colorOption as ColorSeedOption
-                                    val colors =
-                                        colorSeedOption.previewInfo.resolveColors(context.resources)
+                                    val lightThemeColors =
+                                        colorSeedOption.previewInfo.resolveColors(
+                                            /* darkTheme= */ false
+                                        )
+                                    val darkThemeColors =
+                                        colorSeedOption.previewInfo.resolveColors(
+                                            /* darkTheme= */ true
+                                        )
                                     val isSelectedFlow: StateFlow<Boolean> =
                                         interactor.activeColorOption
                                             .map {
@@ -118,10 +124,14 @@
                                                 as StateFlow<String>,
                                         payload =
                                             ColorOptionIconViewModel(
-                                                colors[0],
-                                                colors[1],
-                                                colors[2],
-                                                colors[3]
+                                                lightThemeColor0 = lightThemeColors[0],
+                                                lightThemeColor1 = lightThemeColors[1],
+                                                lightThemeColor2 = lightThemeColors[2],
+                                                lightThemeColor3 = lightThemeColors[3],
+                                                darkThemeColor0 = darkThemeColors[0],
+                                                darkThemeColor1 = darkThemeColors[1],
+                                                darkThemeColor2 = darkThemeColors[2],
+                                                darkThemeColor3 = darkThemeColors[3],
                                             ),
                                         text =
                                             Text.Loaded(
@@ -173,10 +183,14 @@
                                                 as StateFlow<String>,
                                         payload =
                                             ColorOptionIconViewModel(
-                                                primaryColor,
-                                                secondaryColor,
-                                                primaryColor,
-                                                secondaryColor
+                                                lightThemeColor0 = primaryColor,
+                                                lightThemeColor1 = secondaryColor,
+                                                lightThemeColor2 = primaryColor,
+                                                lightThemeColor3 = secondaryColor,
+                                                darkThemeColor0 = primaryColor,
+                                                darkThemeColor1 = secondaryColor,
+                                                darkThemeColor2 = primaryColor,
+                                                darkThemeColor3 = secondaryColor,
                                             ),
                                         text =
                                             Text.Loaded(
diff --git a/src/com/android/customization/picker/notifications/ui/binder/NotificationSectionBinder.kt b/src/com/android/customization/picker/notifications/ui/binder/NotificationSectionBinder.kt
index 54f9bf6..edd469f 100644
--- a/src/com/android/customization/picker/notifications/ui/binder/NotificationSectionBinder.kt
+++ b/src/com/android/customization/picker/notifications/ui/binder/NotificationSectionBinder.kt
@@ -47,7 +47,7 @@
         lifecycleOwner.lifecycleScope.launch {
             lifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) {
                 launch {
-                    viewModel.subtitleStringResourceId.collect {
+                    viewModel.titleStringResourceId.collect {
                         subtitle.text = view.context.getString(it)
                     }
                 }
diff --git a/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModel.kt b/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModel.kt
index 97b0448..58a84a4 100644
--- a/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModel.kt
+++ b/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModel.kt
@@ -35,9 +35,9 @@
     private val interactor: NotificationsInteractor,
 ) : ViewModel() {
 
-    /** A string resource ID for the subtitle. */
+    /** A string resource ID for the title. */
     @StringRes
-    val subtitleStringResourceId: Flow<Int> =
+    val titleStringResourceId: Flow<Int> =
         interactor.settings.map { model ->
             when (model.isShowNotificationsOnLockScreenEnabled) {
                 true -> R.string.show_notifications_on_lock_screen
diff --git a/tests/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModelTest.kt b/tests/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModelTest.kt
index 6442609..43ddea7 100644
--- a/tests/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModelTest.kt
+++ b/tests/src/com/android/customization/picker/notifications/ui/viewmodel/NotificationSectionViewModelTest.kt
@@ -84,18 +84,18 @@
     @Test
     fun `toggles back and forth`() =
         testScope.runTest {
-            val subtitleStringResId = collectLastValue(underTest.subtitleStringResourceId)
+            val titleStringResId = collectLastValue(underTest.titleStringResourceId)
             val isSwitchOn = collectLastValue(underTest.isSwitchOn)
 
-            val initialSubtitleStringRes = subtitleStringResId()
+            val initialSubtitleStringRes = titleStringResId()
             val initialIsSwitchOn = isSwitchOn()
 
             underTest.onClicked()
-            assertThat(subtitleStringResId()).isNotEqualTo(initialSubtitleStringRes)
+            assertThat(titleStringResId()).isNotEqualTo(initialSubtitleStringRes)
             assertThat(isSwitchOn()).isNotEqualTo(initialIsSwitchOn)
 
             underTest.onClicked()
-            assertThat(subtitleStringResId()).isEqualTo(initialSubtitleStringRes)
+            assertThat(titleStringResId()).isEqualTo(initialSubtitleStringRes)
             assertThat(isSwitchOn()).isEqualTo(initialIsSwitchOn)
         }
 }