diff --git a/res/layout/activity_custom_theme.xml b/res/layout/activity_custom_theme.xml
index d69d9d7..82b7887 100644
--- a/res/layout/activity_custom_theme.xml
+++ b/res/layout/activity_custom_theme.xml
@@ -14,7 +14,7 @@
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
-<FrameLayout
+<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
@@ -26,13 +26,14 @@
     <FrameLayout
         android:id="@+id/fragment_container"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_marginBottom="@dimen/custom_theme_nav_height"/>
+        android:layout_height="0dp"
+        android:layout_weight="1"/>
 
     <FrameLayout
         android:id="@+id/custom_theme_nav"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/custom_theme_nav_height">
+        android:layout_height="@dimen/custom_theme_nav_height"
+        android:layout_marginHorizontal="12dp">
         <Button
             android:id="@+id/next_button"
             style="@style/ActionPrimaryButton"
@@ -41,4 +42,4 @@
             android:layout_gravity="end|center_vertical"
             android:text="@string/custom_theme_next"/>
     </FrameLayout>
-</FrameLayout>
+</LinearLayout>
diff --git a/res/layout/fragment_custom_theme_component.xml b/res/layout/fragment_custom_theme_component.xml
new file mode 100644
index 0000000..fb26432
--- /dev/null
+++ b/res/layout/fragment_custom_theme_component.xml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     Copyright (C) 2019 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"
+    android:background="?android:colorPrimary">
+    <include layout="@layout/section_header"/>
+
+    <FrameLayout
+        android:id="@+id/component_preview_container"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"
+        android:background="@color/secondary_color">
+        <include
+            android:id="@+id/component_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/component_preview_page_bottom_margin"
+            layout="@layout/theme_preview_card"/>
+        <TextView
+            android:id="@+id/component_step_counter"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_gravity="bottom|center_horizontal"
+            android:layout_marginVertical="10dp"
+            android:textAlignment="center"
+            android:textAppearance="@style/ComponentCounterTextAppearance"/>
+    </FrameLayout>
+
+    <LinearLayout
+        android:id="@+id/options_section"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:padding="10dp"
+        android:orientation="vertical">
+
+        <TextView
+            android:id="@+id/component_options_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:layout_margin="10dp"
+            android:textAlignment="center"
+            android:textAppearance="@style/HeaderTextAppearance"/>
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/options_container"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/options_container_height"
+            android:layout_gravity="center_horizontal"/>
+
+
+    </LinearLayout>
+
+</LinearLayout>
diff --git a/res/layout/theme_font_option.xml b/res/layout/theme_font_option.xml
new file mode 100644
index 0000000..8445921
--- /dev/null
+++ b/res/layout/theme_font_option.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     Copyright (C) 2019 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="wrap_content"
+              android:layout_height="match_parent"
+              android:orientation="vertical">
+
+    <TextView
+        android:id="@+id/option_label"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_horizontal"
+        android:layout_marginBottom="@dimen/theme_option_label_margin"
+        android:textAppearance="@style/OptionTitleTextAppearance"/>
+    <FrameLayout
+        android:id="@+id/option_tile"
+        android:layout_width="@dimen/option_tile_width"
+        android:layout_height="@dimen/option_tile_width"
+        android:layout_gravity="center_horizontal"
+        android:paddingHorizontal="@dimen/option_tile_padding_horizontal"
+        android:paddingVertical="@dimen/option_tile_padding_vertical"
+        android:background="@drawable/option_border">
+        <TextView
+            android:id="@+id/thumbnail_text"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:textSize="@dimen/font_comonent_option_thumbnail_size"
+            android:textAlignment="center"
+            android:textColor="?android:attr/colorForeground"
+            android:text="@string/font_component_option_thumbnail"/>
+    </FrameLayout>
+</LinearLayout>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 8cf3a1f..93a24d8 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -31,6 +31,7 @@
     <dimen name="preview_page_horizontal_margin">56dp</dimen>
     <dimen name="preview_page_top_margin">16dp</dimen>
     <dimen name="preview_page_bottom_margin">2dp</dimen>
+    <dimen name="component_preview_page_bottom_margin">36dp</dimen>
 
     <!-- Dimensions for the customization option tiles -->
     <dimen name="options_container_height">100dp</dimen>
@@ -62,4 +63,7 @@
     <dimen name="shape_preview_image_height">153dp</dimen>
 
     <dimen name="custom_theme_nav_height">56dp</dimen>
+
+    <!-- Note, using dp instead of sp as this is just the font thumbnail, not text -->
+    <dimen name="font_comonent_option_thumbnail_size">32dp</dimen>
 </resources>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index dc5f7f5..0a981f9 100755
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -97,7 +97,20 @@
         [CHAR LIMIT=20] -->
     <string name="custom_theme_next">Next</string>
 
-    <!-- Title for a system Style/Theme (combination of fonts/colors/icons) that is defined and
+    <!-- Label for a system Style/Theme (combination of fonts/colors/icons) that is defined and
         customized by the user [CHAR LIMIT=15] -->
     <string name="custom_theme_title">Custom</string>
+
+    <!-- Title for a screen that lets the user define their custom system Style/Theme
+        [CHAR LIMIT=30] -->
+    <string name="custom_theme_fragment_title">Custom Style</string>
+
+    <!-- Title of a page allowing the user to choose a font for a custom theme -->
+    <string name="font_component_title">Choose font</string>
+
+    <string name="font_component_option_thumbnail" translatable="false">A</string>
+
+    <!-- Text explaining what the current step is in setting a custom theme, eg: "1 of 4".
+    [CHAR_LIMIT=40] -->
+    <string name="component_step_counter"><xliff:g name="current_step" example="1">%1$d</xliff:g> of <xliff:g name="total_steps" example="4">%2$d</xliff:g></string>
 </resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index a4e79ba..18482ba 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -28,6 +28,8 @@
     <style name="CustomizationTheme.NoActionBar">
         <item name="android:windowActionBar">false</item>
         <item name="android:windowNoTitle">true</item>
+        <item name="android:fitsSystemWindows">false</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
     </style>
 
     <style name="BottomNavStyle">
@@ -84,4 +86,8 @@
         <item name="android:textAppearance">@android:style/TextAppearance.DeviceDefault</item>
     </style>
 
+    <style name="ComponentCounterTextAppearance" parent="@android:style/TextAppearance.DeviceDefault.Small">
+
+
+    </style>
 </resources>