diff --git a/res/color/keyguard_quick_affordance_slot_tab_background_color.xml b/res/color/keyguard_quick_affordance_slot_tab_background_color.xml
new file mode 100644
index 0000000..4708cef
--- /dev/null
+++ b/res/color/keyguard_quick_affordance_slot_tab_background_color.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (C) 2022 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_selected="true" android:color="@color/color_accent_primary" />
+    <item android:color="@android:color/transparent" />
+</selector>
diff --git a/res/color/keyguard_quick_affordance_slot_tab_text_color.xml b/res/color/keyguard_quick_affordance_slot_tab_text_color.xml
new file mode 100644
index 0000000..84502d4
--- /dev/null
+++ b/res/color/keyguard_quick_affordance_slot_tab_text_color.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (C) 2022 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_selected="true" android:color="@color/text_color_on_accent" />
+    <item android:color="@color/text_color_primary" />
+</selector>
diff --git a/res/drawable/keyguard_quick_affordance_icon_container_background.xml b/res/drawable/keyguard_quick_affordance_icon_container_background.xml
new file mode 100644
index 0000000..8bd8af4
--- /dev/null
+++ b/res/drawable/keyguard_quick_affordance_icon_container_background.xml
@@ -0,0 +1,20 @@
+<!--
+     Copyright (C) 2021 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="20dp" />
+    <solid android:color="@color/color_surface_variant" />
+</shape>
diff --git a/res/drawable/keyguard_quick_affordance_icon_container_background_selected.xml b/res/drawable/keyguard_quick_affordance_icon_container_background_selected.xml
new file mode 100644
index 0000000..93a80eb
--- /dev/null
+++ b/res/drawable/keyguard_quick_affordance_icon_container_background_selected.xml
@@ -0,0 +1,34 @@
+<!--
+     Copyright (C) 2021 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle" >
+
+    <stroke
+        android:width="2dp"
+        android:color="@color/text_color_primary" />
+
+    <solid android:color="@color/color_surface_variant" />
+
+    <corners android:radius="20dp" />
+
+    <padding
+        android:left="5dp"
+        android:top="5dp"
+        android:right="5dp"
+        android:bottom="5dp" />
+
+</shape>
diff --git a/res/drawable/keyguard_quick_affordance_picker_background.xml b/res/drawable/keyguard_quick_affordance_picker_background.xml
new file mode 100644
index 0000000..3a49d7a
--- /dev/null
+++ b/res/drawable/keyguard_quick_affordance_picker_background.xml
@@ -0,0 +1,20 @@
+<!--
+     Copyright (C) 2021 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="28dp" />
+    <solid android:color="@color/color_surface" />
+</shape>
diff --git a/res/drawable/keyguard_quick_affordance_slot_tab_background.xml b/res/drawable/keyguard_quick_affordance_slot_tab_background.xml
new file mode 100644
index 0000000..3fbced3
--- /dev/null
+++ b/res/drawable/keyguard_quick_affordance_slot_tab_background.xml
@@ -0,0 +1,20 @@
+<!--
+     Copyright (C) 2021 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="50dp" />
+    <solid android:color="@color/keyguard_quick_affordance_slot_tab_background_color" />
+</shape>
diff --git a/res/layout/fragment_lock_screen_quick_affordances.xml b/res/layout/fragment_lock_screen_quick_affordances.xml
new file mode 100644
index 0000000..9927e6a
--- /dev/null
+++ b/res/layout/fragment_lock_screen_quick_affordances.xml
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (C) 2022 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  -->
+
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical">
+
+    <FrameLayout
+        android:id="@+id/section_header_container"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <include layout="@layout/section_header" />
+
+    </FrameLayout>
+
+    <!-- TODO(b/254858701): plug in the preview here. -->
+    <View
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1" />
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:layout_marginHorizontal="24dp"
+        android:layout_marginBottom="28dp"
+        android:background="@drawable/keyguard_quick_affordance_picker_background"
+        android:paddingTop="22dp"
+        android:paddingBottom="62dp">
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@id/slot_tabs"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:clipToPadding="false"
+            android:paddingHorizontal="16dp" />
+
+        <View
+            android:layout_width="0dp"
+            android:layout_height="22dp" />
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@id/affordances"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:clipToPadding="false"
+            android:paddingHorizontal="16dp" />
+
+    </LinearLayout>
+
+</LinearLayout>
diff --git a/res/layout/keyguard_quick_affordance.xml b/res/layout/keyguard_quick_affordance.xml
index b8efc73..90ba68e 100644
--- a/res/layout/keyguard_quick_affordance.xml
+++ b/res/layout/keyguard_quick_affordance.xml
@@ -18,26 +18,35 @@
 
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="@dimen/keyguard_quick_affordance_picker_item_width"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:gravity="center_horizontal">
 
-    <ImageView
-        android:id="@+id/icon"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:background="@drawable/selectable" />
+    <FrameLayout
+        android:id="@+id/icon_container"
+        android:layout_width="@dimen/keyguard_quick_affordance_icon_container_size"
+        android:layout_height="@dimen/keyguard_quick_affordance_icon_container_size" >
+
+        <ImageView
+            android:id="@+id/icon"
+            android:layout_width="@dimen/keyguard_quick_affordance_icon_size"
+            android:layout_height="@dimen/keyguard_quick_affordance_icon_size"
+            android:layout_gravity="center"
+            android:tint="@color/text_color_primary" />
+
+    </FrameLayout>
 
     <View
         android:layout_width="0dp"
-        android:layout_height="16dp" />
+        android:layout_height="8dp" />
 
     <TextView
         android:id="@+id/name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:textColor="@android:color/white"
+        android:textColor="@color/text_color_primary"
         android:singleLine="true"
         android:ellipsize="end"/>
 
diff --git a/res/layout/keyguard_quick_affordance_section_view.xml b/res/layout/keyguard_quick_affordance_section_view.xml
index 4e14fc8..fc2a1ba 100644
--- a/res/layout/keyguard_quick_affordance_section_view.xml
+++ b/res/layout/keyguard_quick_affordance_section_view.xml
@@ -33,7 +33,7 @@
         <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/keyguard_quick_affordance_title"
+            android:text="@string/keyguard_quick_affordance_section_title"
             style="@style/SectionTitleTextStyle" />
 
         <TextView
diff --git a/res/layout/keyguard_quick_affordance_slot_tab.xml b/res/layout/keyguard_quick_affordance_slot_tab.xml
index c2560cb..ba233cd 100644
--- a/res/layout/keyguard_quick_affordance_slot_tab.xml
+++ b/res/layout/keyguard_quick_affordance_slot_tab.xml
@@ -20,9 +20,10 @@
     android:id="@+id/text"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:textColor="#fff"
-    android:padding="8dp"
+    android:textColor="@color/keyguard_quick_affordance_slot_tab_text_color"
+    android:paddingVertical="8dp"
+    android:paddingHorizontal="16dp"
     android:minWidth="48dp"
     android:minHeight="48dp"
     android:gravity="center"
-    android:background="@drawable/selectable" />
+    android:background="@drawable/keyguard_quick_affordance_slot_tab_background" />
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 9766887..225d7b0 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -137,8 +137,10 @@
     <dimen name="color_seed_chip_margin">14dp</dimen>
 
     <!-- Keyguard quick affordances -->
+    <!-- Size for the container for the icon of a quick affordance for the lock screen in the picker experience. -->
+    <dimen name="keyguard_quick_affordance_icon_container_size">74dp</dimen>
     <!-- Size for the icon of a quick affordance for the lock screen in the picker experience. -->
     <dimen name="keyguard_quick_affordance_icon_size">24dp</dimen>
     <!-- Width of a single selectable item in the lock screen quick affordance picker. -->
-    <dimen name="keyguard_quick_affordance_picker_item_width">64dp</dimen>
+    <dimen name="keyguard_quick_affordance_picker_item_width">74dp</dimen>
 </resources>
diff --git a/res/values/ids.xml b/res/values/ids.xml
index bb94c03..1ed004d 100644
--- a/res/values/ids.xml
+++ b/res/values/ids.xml
@@ -20,4 +20,4 @@
     <item name="end_affordance" type="id" />
     <item name="slot_tabs" type="id" />
     <item name="affordances" type="id" />
-</resources>
\ No newline at end of file
+</resources>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index 1bb5f3c..63fb560 100755
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -315,11 +315,18 @@
     <string name="keyguard_affordance_enablement_dialog_dismiss_button">Done</string>
 
     <!--
+    Title for a screen where the user can configure the lock screen shortcut buttons that appear on
+    the device without unlocking.
+    [CHAR LIMIT=32].
+    -->
+    <string name="keyguard_quick_affordance_title">Shortcuts</string>
+
+    <!--
     Label for a menu item on a settings screen that helps the user open a new screen where they can
     configure the lock screen shortcut buttons that appear on the device without unlocking.
     [CHAR LIMIT=16].
     -->
-    <string name="keyguard_quick_affordance_title">Shortcuts</string>
+    <string name="keyguard_quick_affordance_section_title">Shortcuts</string>
 
     <!--
     Template for text that shows the names of two currently-selected lock screen shortcuts on the
diff --git a/src/com/android/customization/picker/quickaffordance/ui/adapter/AffordancesAdapter.kt b/src/com/android/customization/picker/quickaffordance/ui/adapter/AffordancesAdapter.kt
index 609c6ae..b0dc350 100644
--- a/src/com/android/customization/picker/quickaffordance/ui/adapter/AffordancesAdapter.kt
+++ b/src/com/android/customization/picker/quickaffordance/ui/adapter/AffordancesAdapter.kt
@@ -38,6 +38,7 @@
     }
 
     class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
+        val iconContainerView: View = itemView.requireViewById(R.id.icon_container)
         val iconView: ImageView = itemView.requireViewById(R.id.icon)
         val nameView: TextView = itemView.requireViewById(R.id.name)
     }
@@ -73,6 +74,13 @@
                 null
             }
         )
+        holder.iconContainerView.setBackgroundResource(
+            if (item.isSelected) {
+                R.drawable.keyguard_quick_affordance_icon_container_background_selected
+            } else {
+                R.drawable.keyguard_quick_affordance_icon_container_background
+            }
+        )
         holder.iconView.isSelected = item.isSelected
         holder.nameView.isSelected = item.isSelected
         holder.iconView.setImageDrawable(item.icon)
diff --git a/src/com/android/customization/picker/quickaffordance/ui/binder/KeyguardQuickAffordancePickerBinder.kt b/src/com/android/customization/picker/quickaffordance/ui/binder/KeyguardQuickAffordancePickerBinder.kt
index 605bd7b..62f2e26 100644
--- a/src/com/android/customization/picker/quickaffordance/ui/binder/KeyguardQuickAffordancePickerBinder.kt
+++ b/src/com/android/customization/picker/quickaffordance/ui/binder/KeyguardQuickAffordancePickerBinder.kt
@@ -21,7 +21,9 @@
 import android.app.Dialog
 import android.content.Context
 import android.content.DialogInterface
+import android.graphics.Rect
 import android.view.View
+import androidx.core.view.ViewCompat
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.lifecycleScope
@@ -52,10 +54,12 @@
         slotTabView.adapter = slotTabAdapter
         slotTabView.layoutManager =
             LinearLayoutManager(view.context, RecyclerView.HORIZONTAL, false)
+        slotTabView.addItemDecoration(ItemSpacing())
         val affordancesAdapter = AffordancesAdapter()
         affordancesView.adapter = affordancesAdapter
         affordancesView.layoutManager =
             LinearLayoutManager(view.context, RecyclerView.HORIZONTAL, false)
+        affordancesView.addItemDecoration(ItemSpacing())
 
         var dialog: Dialog? = null
 
@@ -128,4 +132,28 @@
             )
             .show()
     }
+
+    private class ItemSpacing : RecyclerView.ItemDecoration() {
+        override fun getItemOffsets(outRect: Rect, itemPosition: Int, parent: RecyclerView) {
+            val addSpacingToStart = itemPosition > 0
+            val addSpacingToEnd = itemPosition < (parent.adapter?.itemCount ?: 0) - 1
+            val isRtl = parent.layoutManager?.layoutDirection == ViewCompat.LAYOUT_DIRECTION_RTL
+            val density = parent.context.resources.displayMetrics.density
+            if (!isRtl) {
+                outRect.left = if (addSpacingToStart) ITEM_SPACING_DP.toPx(density) else 0
+                outRect.right = if (addSpacingToEnd) ITEM_SPACING_DP.toPx(density) else 0
+            } else {
+                outRect.left = if (addSpacingToEnd) ITEM_SPACING_DP.toPx(density) else 0
+                outRect.right = if (addSpacingToStart) ITEM_SPACING_DP.toPx(density) else 0
+            }
+        }
+
+        private fun Int.toPx(density: Float): Int {
+            return (this * density).toInt()
+        }
+
+        companion object {
+            private const val ITEM_SPACING_DP = 8
+        }
+    }
 }
diff --git a/src/com/android/customization/picker/quickaffordance/ui/fragment/KeyguardQuickAffordancePickerFragment.kt b/src/com/android/customization/picker/quickaffordance/ui/fragment/KeyguardQuickAffordancePickerFragment.kt
index e910488..89235d7 100644
--- a/src/com/android/customization/picker/quickaffordance/ui/fragment/KeyguardQuickAffordancePickerFragment.kt
+++ b/src/com/android/customization/picker/quickaffordance/ui/fragment/KeyguardQuickAffordancePickerFragment.kt
@@ -17,6 +17,16 @@
 
 package com.android.customization.picker.quickaffordance.ui.fragment
 
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.lifecycle.ViewModelProvider
+import androidx.lifecycle.get
+import com.android.customization.module.ThemePickerInjector
+import com.android.customization.picker.quickaffordance.ui.binder.KeyguardQuickAffordancePickerBinder
+import com.android.wallpaper.R
+import com.android.wallpaper.module.InjectorProvider
 import com.android.wallpaper.picker.AppbarFragment
 
 class KeyguardQuickAffordancePickerFragment : AppbarFragment() {
@@ -26,5 +36,33 @@
         }
     }
 
-    // TODO(b/254858701): implement this UI.
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        val view =
+            inflater.inflate(
+                R.layout.fragment_lock_screen_quick_affordances,
+                container,
+                false,
+            )
+        setUpToolbar(view)
+        val injector = InjectorProvider.getInjector() as ThemePickerInjector
+        KeyguardQuickAffordancePickerBinder.bind(
+            view = view,
+            viewModel =
+                ViewModelProvider(
+                        requireActivity(),
+                        injector.getKeyguardQuickAffordancePickerViewModelFactory(requireContext()),
+                    )
+                    .get(),
+            lifecycleOwner = this,
+        )
+        return view
+    }
+
+    override fun getDefaultTitle(): CharSequence {
+        return requireContext().getString(R.string.keyguard_quick_affordance_title)
+    }
 }