diff --git a/core/res/res/drawable-hdpi/ic_facial_backup.png b/core/res/res/drawable-hdpi/ic_facial_backup.png
new file mode 100644
index 0000000000000..295610910ddad
Binary files /dev/null and b/core/res/res/drawable-hdpi/ic_facial_backup.png differ
diff --git a/core/res/res/drawable-hdpi/intro_bg.png b/core/res/res/drawable-hdpi/intro_bg.png
new file mode 100644
index 0000000000000..a758e7dd1b896
Binary files /dev/null and b/core/res/res/drawable-hdpi/intro_bg.png differ
diff --git a/core/res/res/drawable-mdpi/ic_facial_backup.png b/core/res/res/drawable-mdpi/ic_facial_backup.png
new file mode 100644
index 0000000000000..6ed1327a626a5
Binary files /dev/null and b/core/res/res/drawable-mdpi/ic_facial_backup.png differ
diff --git a/core/res/res/drawable-mdpi/intro_bg.png b/core/res/res/drawable-mdpi/intro_bg.png
new file mode 100644
index 0000000000000..540da311dcc1a
Binary files /dev/null and b/core/res/res/drawable-mdpi/intro_bg.png differ
diff --git a/core/res/res/drawable-xhdpi/ic_facial_backup.png b/core/res/res/drawable-xhdpi/ic_facial_backup.png
new file mode 100644
index 0000000000000..942cf239fff9a
Binary files /dev/null and b/core/res/res/drawable-xhdpi/ic_facial_backup.png differ
diff --git a/core/res/res/drawable-xhdpi/intro_bg.png b/core/res/res/drawable-xhdpi/intro_bg.png
new file mode 100644
index 0000000000000..00466c539e8a6
Binary files /dev/null and b/core/res/res/drawable-xhdpi/intro_bg.png differ
diff --git a/core/res/res/layout-sw600dp/keyguard_screen_password_landscape.xml b/core/res/res/layout-sw600dp/keyguard_screen_password_landscape.xml
index 43d0a2c5b31f0..2495b67714585 100644
--- a/core/res/res/layout-sw600dp/keyguard_screen_password_landscape.xml
+++ b/core/res/res/layout-sw600dp/keyguard_screen_password_landscape.xml
@@ -153,13 +153,32 @@
         </LinearLayout>
 
         <!-- Area to overlay FaceLock -->
-        <View android:id="@+id/faceLockAreaView"
+        <RelativeLayout
+            android:id="@+id/faceLockAreaView"
             android:visibility="invisible"
             android:layout_width="512dip"
             android:layout_height="512dip"
             android:layout_centerInParent="true"
-            android:background="@color/facelock_color_background"
-        />
+            android:background="@drawable/intro_bg">
+
+            <View
+               android:id="@+id/spotlightMask"
+               android:layout_width="match_parent"
+               android:layout_height="match_parent"
+               android:background="@color/facelock_spotlight_mask"
+            />
+
+            <ImageView
+                android:id="@+id/cancel_button"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="5dip"
+                android:layout_alignParentTop="true"
+                android:layout_alignParentRight="true"
+                android:src="@drawable/ic_facial_backup"
+            />
+
+        </RelativeLayout>
 
     </RelativeLayout>
 
diff --git a/core/res/res/layout-sw600dp/keyguard_screen_password_portrait.xml b/core/res/res/layout-sw600dp/keyguard_screen_password_portrait.xml
index 8c02888b0e9bf..fb62eb68d76b0 100644
--- a/core/res/res/layout-sw600dp/keyguard_screen_password_portrait.xml
+++ b/core/res/res/layout-sw600dp/keyguard_screen_password_portrait.xml
@@ -156,13 +156,32 @@
         </LinearLayout>
 
         <!-- Area to overlay FaceLock -->
-        <View android:id="@+id/faceLockAreaView"
+        <RelativeLayout
+            android:id="@+id/faceLockAreaView"
             android:visibility="invisible"
             android:layout_width="512dip"
             android:layout_height="512dip"
             android:layout_centerInParent="true"
-            android:background="@color/facelock_color_background"
-        />
+            android:background="@drawable/intro_bg">
+
+            <View
+               android:id="@+id/spotlightMask"
+               android:layout_width="match_parent"
+               android:layout_height="match_parent"
+               android:background="@color/facelock_spotlight_mask"
+            />
+
+            <ImageView
+                android:id="@+id/cancel_button"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="5dip"
+                android:layout_alignParentTop="true"
+                android:layout_alignParentRight="true"
+                android:src="@drawable/ic_facial_backup"
+            />
+
+        </RelativeLayout>
 
     </RelativeLayout>
 
diff --git a/core/res/res/layout-sw600dp/keyguard_screen_unlock_landscape.xml b/core/res/res/layout-sw600dp/keyguard_screen_unlock_landscape.xml
index 802ef822f9c37..53ecbac2935a5 100644
--- a/core/res/res/layout-sw600dp/keyguard_screen_unlock_landscape.xml
+++ b/core/res/res/layout-sw600dp/keyguard_screen_unlock_landscape.xml
@@ -124,13 +124,32 @@
         </RelativeLayout>
 
         <!-- Area to overlay FaceLock -->
-        <View android:id="@+id/faceLockAreaView"
+        <RelativeLayout
+            android:id="@+id/faceLockAreaView"
             android:visibility="invisible"
             android:layout_width="512dip"
             android:layout_height="512dip"
             android:layout_centerInParent="true"
-            android:background="@color/facelock_color_background"
-        />
+            android:background="@drawable/intro_bg">
+
+            <View
+               android:id="@+id/spotlightMask"
+               android:layout_width="match_parent"
+               android:layout_height="match_parent"
+               android:background="@color/facelock_spotlight_mask"
+            />
+
+            <ImageView
+                android:id="@+id/cancel_button"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="5dip"
+                android:layout_alignParentTop="true"
+                android:layout_alignParentRight="true"
+                android:src="@drawable/ic_facial_backup"
+            />
+
+        </RelativeLayout>
 
     </RelativeLayout>
 
diff --git a/core/res/res/layout-sw600dp/keyguard_screen_unlock_portrait.xml b/core/res/res/layout-sw600dp/keyguard_screen_unlock_portrait.xml
index 40f24929f9bac..577668fe0da06 100644
--- a/core/res/res/layout-sw600dp/keyguard_screen_unlock_portrait.xml
+++ b/core/res/res/layout-sw600dp/keyguard_screen_unlock_portrait.xml
@@ -119,13 +119,32 @@
         </RelativeLayout>
 
         <!-- Area to overlay FaceLock -->
-        <View android:id="@+id/faceLockAreaView"
+        <RelativeLayout
+            android:id="@+id/faceLockAreaView"
             android:visibility="invisible"
             android:layout_width="512dip"
             android:layout_height="512dip"
             android:layout_centerInParent="true"
-            android:background="@color/facelock_color_background"
-        />
+            android:background="@drawable/intro_bg">
+
+            <View
+               android:id="@+id/spotlightMask"
+               android:layout_width="match_parent"
+               android:layout_height="match_parent"
+               android:background="@color/facelock_spotlight_mask"
+            />
+
+            <ImageView
+                android:id="@+id/cancel_button"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="5dip"
+                android:layout_alignParentTop="true"
+                android:layout_alignParentRight="true"
+                android:src="@drawable/ic_facial_backup"
+            />
+
+        </RelativeLayout>
 
     </RelativeLayout>
 
diff --git a/core/res/res/layout/keyguard_screen_password_landscape.xml b/core/res/res/layout/keyguard_screen_password_landscape.xml
index 66d7fd79044c4..3bea16ce45b63 100644
--- a/core/res/res/layout/keyguard_screen_password_landscape.xml
+++ b/core/res/res/layout/keyguard_screen_password_landscape.xml
@@ -208,7 +208,8 @@
         />
 
     <!-- Area to overlay FaceLock -->
-    <TextView android:id="@+id/faceLockAreaView"
+    <RelativeLayout
+        android:id="@+id/faceLockAreaView"
         android:visibility="invisible"
         android:layout_row="0"
         android:layout_column="2"
@@ -217,7 +218,25 @@
         android:layout_gravity="fill"
         android:layout_width="0dip"
         android:layout_height="0dip"
-        android:background="@color/facelock_color_background"
-    />
+        android:background="@drawable/intro_bg">
+
+        <View
+            android:id="@+id/spotlightMask"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@color/facelock_spotlight_mask"
+        />
+
+        <ImageView
+            android:id="@+id/cancel_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:padding="5dip"
+            android:layout_alignParentTop="true"
+            android:layout_alignParentRight="true"
+            android:src="@drawable/ic_facial_backup"
+        />
+
+    </RelativeLayout>
 
 </GridLayout>
diff --git a/core/res/res/layout/keyguard_screen_password_portrait.xml b/core/res/res/layout/keyguard_screen_password_portrait.xml
index 426b2f7f139e4..6b409aa21678f 100644
--- a/core/res/res/layout/keyguard_screen_password_portrait.xml
+++ b/core/res/res/layout/keyguard_screen_password_portrait.xml
@@ -199,7 +199,8 @@
         />
 
     <!-- Area to overlay FaceLock -->
-    <TextView android:id="@+id/faceLockAreaView"
+    <RelativeLayout
+        android:id="@+id/faceLockAreaView"
         android:visibility="invisible"
         android:layout_row="3"
         android:layout_column="0"
@@ -208,7 +209,25 @@
         android:layout_gravity="fill"
         android:layout_width="0dip"
         android:layout_height="0dip"
-        android:background="@color/facelock_color_background"
-    />
+        android:background="@drawable/intro_bg">
+
+        <View
+            android:id="@+id/spotlightMask"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@color/facelock_spotlight_mask"
+        />
+
+        <ImageView
+            android:id="@+id/cancel_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:padding="5dip"
+            android:layout_alignParentTop="true"
+            android:layout_alignParentRight="true"
+            android:src="@drawable/ic_facial_backup"
+        />
+
+     </RelativeLayout>
 
 </GridLayout>
diff --git a/core/res/res/layout/keyguard_screen_unlock_landscape.xml b/core/res/res/layout/keyguard_screen_unlock_landscape.xml
index 103865706fffa..7f9aaa048f889 100644
--- a/core/res/res/layout/keyguard_screen_unlock_landscape.xml
+++ b/core/res/res/layout/keyguard_screen_unlock_landscape.xml
@@ -161,7 +161,8 @@
         />
 
     <!-- Area to overlay FaceLock -->
-    <TextView android:id="@+id/faceLockAreaView"
+    <RelativeLayout
+        android:id="@+id/faceLockAreaView"
         android:visibility="invisible"
         android:layout_row="0"
         android:layout_column="1"
@@ -171,7 +172,25 @@
         android:layout_marginLeft="8dip"
         android:layout_width="0dip"
         android:layout_height="0dip"
-        android:background="@color/facelock_color_background"
-    />
+        android:background="@drawable/intro_bg">
+
+        <View
+            android:id="@+id/spotlightMask"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@color/facelock_spotlight_mask"
+        />
+
+        <ImageView
+            android:id="@+id/cancel_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:padding="5dip"
+            android:layout_alignParentTop="true"
+            android:layout_alignParentRight="true"
+            android:src="@drawable/ic_facial_backup"
+        />
+
+    </RelativeLayout>
 
 </GridLayout>
diff --git a/core/res/res/layout/keyguard_screen_unlock_portrait.xml b/core/res/res/layout/keyguard_screen_unlock_portrait.xml
index 336faa19b182b..9a2e024553060 100644
--- a/core/res/res/layout/keyguard_screen_unlock_portrait.xml
+++ b/core/res/res/layout/keyguard_screen_unlock_portrait.xml
@@ -170,7 +170,8 @@
         />
 
     <!-- Area to overlay FaceLock -->
-    <TextView android:id="@+id/faceLockAreaView"
+    <RelativeLayout
+        android:id="@+id/faceLockAreaView"
         android:visibility="invisible"
         android:layout_row="4"
         android:layout_column="0"
@@ -181,7 +182,25 @@
         android:layout_marginBottom="8dip"
         android:layout_width="0dip"
         android:layout_height="0dip"
-        android:background="@color/facelock_color_background"
-    />
+        android:background="@drawable/intro_bg">
+
+        <View
+            android:id="@+id/spotlightMask"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@color/facelock_spotlight_mask"
+        />
+
+        <ImageView
+            android:id="@+id/cancel_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:padding="5dip"
+            android:layout_alignParentTop="true"
+            android:layout_alignParentRight="true"
+            android:src="@drawable/ic_facial_backup"
+        />
+
+    </RelativeLayout>
 
 </GridLayout>
diff --git a/core/res/res/values/colors.xml b/core/res/res/values/colors.xml
index b1a4b42498c7b..5ff2c01167ae4 100644
--- a/core/res/res/values/colors.xml
+++ b/core/res/res/values/colors.xml
@@ -113,7 +113,7 @@
     <color name="lockscreen_owner_info">#ff9a9a9a</color>
 
     <!-- FaceLock -->
-    <color name="facelock_color_background">#000000</color>
+    <color name="facelock_spotlight_mask">#CC000000</color>
 
     <!-- For holo theme -->
       <drawable name="screen_background_holo_light">#fff3f3f3</drawable>