diff --git a/res/layout-land/fragment_custom_theme_name.xml b/res/layout-land/fragment_custom_theme_name.xml
index 3c85f35..bc55bb6 100644
--- a/res/layout-land/fragment_custom_theme_name.xml
+++ b/res/layout-land/fragment_custom_theme_name.xml
@@ -31,15 +31,11 @@
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1"
-            android:background="@color/secondary_color">
-            <include
-                android:id="@+id/component_preview_content"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"
-                android:layout_marginTop="@dimen/preview_page_top_margin"
-                android:layout_marginBottom="@dimen/component_preview_page_bottom_margin"
-                layout="@layout/theme_preview_card"/>
+            android:paddingTop="@dimen/preview_content_padding_top"
+            android:paddingBottom="@dimen/preview_content_padding_bottom"
+            android:clipToPadding="false"
+            android:background="@color/fullscreen_preview_background">
+            <include layout="@layout/theme_preview_card_v2"/>
         </FrameLayout>
         <LinearLayout
             android:id="@+id/options_section"
diff --git a/res/layout/fragment_custom_theme_name.xml b/res/layout/fragment_custom_theme_name.xml
index 0a18aab..f5dfd42 100644
--- a/res/layout/fragment_custom_theme_name.xml
+++ b/res/layout/fragment_custom_theme_name.xml
@@ -31,7 +31,10 @@
             android:id="@+id/component_preview_container"
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            android:background="@color/secondary_color"
+            android:paddingTop="@dimen/preview_content_padding_top"
+            android:paddingBottom="@dimen/preview_content_padding_bottom"
+            android:clipToPadding="false"
+            android:background="@color/fullscreen_preview_background"
             app:layout_constrainedHeight="true"
             app:layout_constraintBottom_toTopOf="@+id/guideline"
             app:layout_constraintEnd_toEndOf="parent"
@@ -40,15 +43,7 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintVertical_bias="0.0">
-
-            <include
-                android:id="@+id/component_preview_content"
-                layout="@layout/theme_preview_card"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"
-                android:layout_marginTop="@dimen/preview_page_top_margin"
-                android:layout_marginBottom="@dimen/indicator_container_height"/>
+            <include layout="@layout/theme_preview_card_v2"/>
         </FrameLayout>
 
         <androidx.constraintlayout.widget.Guideline
diff --git a/src/com/android/customization/picker/theme/CustomThemeNameFragment.java b/src/com/android/customization/picker/theme/CustomThemeNameFragment.java
index 8075ffa..6456380 100644
--- a/src/com/android/customization/picker/theme/CustomThemeNameFragment.java
+++ b/src/com/android/customization/picker/theme/CustomThemeNameFragment.java
@@ -15,35 +15,26 @@
  */
 package com.android.customization.picker.theme;
 
-import android.content.Context;
-import android.content.res.Resources;
-import android.graphics.Bitmap;
-import android.graphics.drawable.BitmapDrawable;
-import android.graphics.drawable.Drawable;
 import android.os.Bundle;
-import android.text.Editable;
-import android.text.TextWatcher;
 import android.view.LayoutInflater;
 import android.view.View;
-import android.view.View.OnLayoutChangeListener;
 import android.view.ViewGroup;
 import android.widget.EditText;
-import android.widget.TextView;
+import android.widget.ImageView;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
-import androidx.cardview.widget.CardView;
 
 import com.android.customization.model.theme.ThemeBundle.PreviewInfo;
-import com.android.customization.picker.theme.ThemePreviewPage.ThemeCoverPage;
+import com.android.customization.picker.WallpaperPreviewer;
 import com.android.wallpaper.R;
-import com.android.wallpaper.asset.Asset;
-import com.android.wallpaper.asset.BitmapCachingAsset;
+import com.android.wallpaper.model.WallpaperInfo;
 import com.android.wallpaper.module.CurrentWallpaperInfoFactory;
 import com.android.wallpaper.module.InjectorProvider;
 import com.android.wallpaper.picker.AppbarFragment;
-import com.android.wallpaper.util.TimeTicker;
+import com.android.wallpaper.widget.WallpaperColorsLoader;
 
+/** Fragment of naming a custom theme. */
 public class CustomThemeNameFragment extends CustomThemeStepFragment {
 
     public static CustomThemeNameFragment newInstance(CharSequence toolbarTitle, int position,
@@ -56,43 +47,10 @@
         return fragment;
     }
 
-
-    private int[] mColorButtonIds = {
-            R.id.preview_check_selected, R.id.preview_radio_selected, R.id.preview_toggle_selected
-    };
-    private int[] mColorTileIds = {
-            R.id.preview_color_qs_0_bg, R.id.preview_color_qs_1_bg, R.id.preview_color_qs_2_bg
-    };
-    private int[][] mColorTileIconIds = {
-            new int[]{ R.id.preview_color_qs_0_icon, 0},
-            new int[]{ R.id.preview_color_qs_1_icon, 1},
-            new int[] { R.id.preview_color_qs_2_icon, 3}
-    };
-
-    private int[] mShapeIconIds = {
-            R.id.shape_preview_icon_0, R.id.shape_preview_icon_1, R.id.shape_preview_icon_2,
-            R.id.shape_preview_icon_3, R.id.shape_preview_icon_4, R.id.shape_preview_icon_5
-    };
-
-    private Asset mWallpaperAsset;
-    private ThemeCoverPage mCoverPage;
-    private TimeTicker mTicker;
     private EditText mNameEditor;
-
-    @Override
-    public void onCreate(@Nullable Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-        CurrentWallpaperInfoFactory currentWallpaperFactory = InjectorProvider.getInjector()
-                .getCurrentWallpaperFactory(getActivity().getApplicationContext());
-        currentWallpaperFactory.createCurrentWallpaperInfos(
-                (homeWallpaper, lockWallpaper, presentationMode) -> {
-                    mWallpaperAsset = new BitmapCachingAsset(getContext(),
-                            homeWallpaper.getThumbAsset(getContext()));
-                    if (mCoverPage != null) {
-                        mCoverPage.bindBody(true);
-                    }
-                }, false);
-    }
+    private ImageView mWallpaperImage;
+    private WallpaperInfo mCurrentHomeWallpaper;
+    private ThemeOptionPreviewer mThemeOptionPreviewer;
 
     @Nullable
     @Override
@@ -103,93 +61,55 @@
         mTitle.setText(mTitleResId);
         mNameEditor = view.findViewById(R.id.custom_theme_name);
         mNameEditor.setText(mCustomThemeManager.getOriginalTheme().getTitle());
-        bindCover(view.findViewById(R.id.component_preview_content));
+        CurrentWallpaperInfoFactory currentWallpaperFactory = InjectorProvider.getInjector()
+                .getCurrentWallpaperFactory(getActivity().getApplicationContext());
+
+        // Set wallpaper background.
+        mWallpaperImage = view.findViewById(R.id.wallpaper_preview_image);
+        final WallpaperPreviewer wallpaperPreviewer = new WallpaperPreviewer(
+                getLifecycle(),
+                getActivity(),
+                mWallpaperImage,
+                view.findViewById(R.id.wallpaper_preview_surface));
+        currentWallpaperFactory.createCurrentWallpaperInfos(
+                (homeWallpaper, lockWallpaper, presentationMode) -> {
+                    mCurrentHomeWallpaper = homeWallpaper;
+                    wallpaperPreviewer.setWallpaper(homeWallpaper);
+                    updateThemePreviewColorPerWallpaper();
+                }, false);
+
+        // Set theme option.
+        mThemeOptionPreviewer = new ThemeOptionPreviewer(
+                getLifecycle(),
+                getContext(),
+                view.findViewById(R.id.theme_preview_container));
+        PreviewInfo previewInfo = mCustomThemeManager.buildCustomThemePreviewInfo(getContext());
+        mThemeOptionPreviewer.setPreviewInfo(previewInfo);
+
+        view.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
+            @Override
+            public void onLayoutChange(View v, int left, int top, int right, int bottom,
+                                       int oldLeft, int oldTop, int oldRight, int oldBottom) {
+                wallpaperPreviewer.updatePreviewCardRadius();
+                updateThemePreviewColorPerWallpaper();
+                view.removeOnLayoutChangeListener(this);
+            }
+        });
         return view;
     }
 
-    @Override
-    public void onResume() {
-        super.onResume();
-        mTicker = TimeTicker.registerNewReceiver(getContext(), this::updateTime);
-        updateTime();
-    }
-
-    private void updateTime() {
-        if (mCoverPage != null) {
-            mCoverPage.updateTime();
+    private void updateThemePreviewColorPerWallpaper() {
+        if (mCurrentHomeWallpaper != null && mWallpaperImage.getMeasuredWidth() > 0
+                && mWallpaperImage.getMeasuredHeight() > 0) {
+            WallpaperColorsLoader.getWallpaperColors(
+                    mCurrentHomeWallpaper.getThumbAsset(getContext()),
+                    mWallpaperImage.getMeasuredWidth(),
+                    mWallpaperImage.getMeasuredHeight(),
+                    mThemeOptionPreviewer::updateColorForLauncherWidgets);
         }
     }
 
     @Override
-    public void onPause() {
-        super.onPause();
-        if (getContext() != null) {
-            getContext().unregisterReceiver(mTicker);
-        }
-    }
-
-    private void bindCover(CardView card) {
-        Context context = getContext();
-        PreviewInfo previewInfo = mCustomThemeManager.buildCustomThemePreviewInfo(context);
-        mCoverPage = new ThemeCoverPage(getActivity(), getThemeName(),
-                previewInfo.resolveAccentColor(getResources()), previewInfo.icons,
-                previewInfo.headlineFontFamily, previewInfo.bottomSheeetCornerRadius,
-                previewInfo.shapeDrawable, previewInfo.shapeAppIcons, null,
-                mColorButtonIds, mColorTileIds, mColorTileIconIds, mShapeIconIds,
-                new WallpaperLayoutListener());
-        mCoverPage.setCard(card);
-        mCoverPage.bindPreviewContent();
-        mNameEditor.addTextChangedListener(new TextWatcher() {
-            @Override
-            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
-
-            }
-
-            @Override
-            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
-                ((TextView)card.findViewById(R.id.theme_preview_card_header)).setText(charSequence);
-            }
-
-            @Override
-            public void afterTextChanged(Editable editable) {
-
-            }
-        });
-    }
-
-    private class WallpaperLayoutListener implements OnLayoutChangeListener {
-
-        @Override
-        public void onLayoutChange(View view, int left, int top, int right,
-                int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
-            int targetWidth = right - left;
-            int targetHeight = bottom - top;
-            if (targetWidth > 0 && targetHeight > 0) {
-                if (mWallpaperAsset != null) {
-                    mWallpaperAsset.decodeBitmap(
-                            targetWidth, targetHeight,
-                            bitmap -> setWallpaperBitmap(view, bitmap));
-                }
-                view.removeOnLayoutChangeListener(this);
-            }
-        }
-
-        private void setWallpaperBitmap(View view, Bitmap bitmap) {
-            Resources res = view.getContext().getResources();
-            Drawable background = new BitmapDrawable(res, bitmap);
-            background.setAlpha(ThemeCoverPage.COVER_PAGE_WALLPAPER_ALPHA);
-
-            view.findViewById(R.id.theme_preview_card_background).setBackground(background);
-        }
-    }
-
-    @Override
-    public void onDestroyView() {
-        super.onDestroyView();
-        mCoverPage = null;
-    }
-
-    @Override
     protected int getFragmentLayoutResId() {
         return R.layout.fragment_custom_theme_name;
     }