diff --git a/SmileLock-Example/SmileLock-Example/Info.plist b/SmileLock-Example/SmileLock-Example/Info.plist
index 5ce55bb..10c25e4 100644
--- a/SmileLock-Example/SmileLock-Example/Info.plist
+++ b/SmileLock-Example/SmileLock-Example/Info.plist
@@ -28,6 +28,8 @@
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
 	<string>PasswordLogin</string>
+	<key>NSFaceIDUsageDescription</key>
+	<string>Unlock it</string>
 	<key>UIRequiredDeviceCapabilities</key>
 	<array>
 		<string>armv7</string>
diff --git a/SmileLock.podspec b/SmileLock.podspec
index 5846a5b..d368aeb 100644
--- a/SmileLock.podspec
+++ b/SmileLock.podspec
@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name         = "SmileLock"
-  s.version      = "3.0.0"
+  s.version      = "3.0.1"
   s.summary      = "A library for make a beautiful Passcode Lock View."
   s.description  = <<-DESC
                    1. Create a beautiful passcode lock view simply.
diff --git a/SmileLock/Assets/Assets.xcassets/faceid.imageset/Contents.json b/SmileLock/Assets/Assets.xcassets/faceid.imageset/Contents.json
new file mode 100644
index 0000000..0099257
--- /dev/null
+++ b/SmileLock/Assets/Assets.xcassets/faceid.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "faceid.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "faceid@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "faceid@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid.png b/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid.png
new file mode 100644
index 0000000..80720a3
Binary files /dev/null and b/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid.png differ
diff --git a/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid@2x.png b/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid@2x.png
new file mode 100644
index 0000000..213b72a
Binary files /dev/null and b/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid@2x.png differ
diff --git a/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid@3x.png b/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid@3x.png
new file mode 100644
index 0000000..dd198b4
Binary files /dev/null and b/SmileLock/Assets/Assets.xcassets/faceid.imageset/faceid@3x.png differ
diff --git a/SmileLock/Assets/PasswordContainerView.xib b/SmileLock/Assets/PasswordContainerView.xib
index c538026..c585daa 100644
--- a/SmileLock/Assets/PasswordContainerView.xib
+++ b/SmileLock/Assets/PasswordContainerView.xib
@@ -1,8 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="10117" systemVersion="16A254g" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13527"/>
         <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
@@ -16,7 +21,7 @@
                     <subviews>
                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="aNd-Zg-ePe" customClass="PasswordDotView" customModule="SmileLock" customModuleProvider="target">
                             <rect key="frame" x="0.0" y="0.0" width="288" height="17"/>
-                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                             <userDefinedRuntimeAttributes>
                                 <userDefinedRuntimeAttribute type="number" keyPath="inputDotCount">
                                     <integer key="value" value="0"/>
@@ -31,21 +36,21 @@
                                     <subviews>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mNO-I8-8HR" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
                                             <rect key="frame" x="0.0" y="0.0" width="86" height="85"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="1"/>
                                             </userDefinedRuntimeAttributes>
                                         </view>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="R7E-OV-zzd" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
                                             <rect key="frame" x="101" y="0.0" width="86" height="85"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="2"/>
                                             </userDefinedRuntimeAttributes>
                                         </view>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="EWl-Jj-Mvi" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
                                             <rect key="frame" x="202" y="0.0" width="86" height="85"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="3"/>
                                             </userDefinedRuntimeAttributes>
@@ -53,25 +58,25 @@
                                     </subviews>
                                 </stackView>
                                 <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="15" translatesAutoresizingMaskIntoConstraints="NO" id="O9w-0G-0IG">
-                                    <rect key="frame" x="0.0" y="95" width="288" height="84"/>
+                                    <rect key="frame" x="0.0" y="95" width="288" height="84.5"/>
                                     <subviews>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="t6f-Qj-936" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
-                                            <rect key="frame" x="0.0" y="0.0" width="86" height="84"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="86" height="84.5"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="4"/>
                                             </userDefinedRuntimeAttributes>
                                         </view>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="LoJ-Bd-MiK" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
-                                            <rect key="frame" x="101" y="0.0" width="86" height="84"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <rect key="frame" x="101" y="0.0" width="86" height="84.5"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="5"/>
                                             </userDefinedRuntimeAttributes>
                                         </view>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="5R9-ep-8IT" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
-                                            <rect key="frame" x="202" y="0.0" width="86" height="84"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <rect key="frame" x="202" y="0.0" width="86" height="84.5"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="6"/>
                                             </userDefinedRuntimeAttributes>
@@ -79,25 +84,25 @@
                                     </subviews>
                                 </stackView>
                                 <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="15" translatesAutoresizingMaskIntoConstraints="NO" id="44G-t4-h3e">
-                                    <rect key="frame" x="0.0" y="189" width="288" height="85"/>
+                                    <rect key="frame" x="0.0" y="189.5" width="288" height="85"/>
                                     <subviews>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="eRG-m3-KYK" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
                                             <rect key="frame" x="0.0" y="0.0" width="86" height="85"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="7"/>
                                             </userDefinedRuntimeAttributes>
                                         </view>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="nUG-Ev-7sV" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
                                             <rect key="frame" x="101" y="0.0" width="86" height="85"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="8"/>
                                             </userDefinedRuntimeAttributes>
                                         </view>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="4fx-v7-wSg" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
                                             <rect key="frame" x="202" y="0.0" width="86" height="85"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="9"/>
                                             </userDefinedRuntimeAttributes>
@@ -105,10 +110,10 @@
                                     </subviews>
                                 </stackView>
                                 <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="15" translatesAutoresizingMaskIntoConstraints="NO" id="Rfs-SF-Ii0">
-                                    <rect key="frame" x="0.0" y="284" width="288" height="85"/>
+                                    <rect key="frame" x="0.0" y="284.5" width="288" height="84.5"/>
                                     <subviews>
                                         <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Tqj-3l-W1f">
-                                            <rect key="frame" x="0.0" y="0.0" width="86" height="85"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="86" height="84.5"/>
                                             <inset key="contentEdgeInsets" minX="10" minY="10" maxX="10" maxY="10"/>
                                             <state key="normal" image="Touch"/>
                                             <connections>
@@ -116,17 +121,17 @@
                                             </connections>
                                         </button>
                                         <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ruX-2t-uDv" customClass="PasswordInputView" customModule="SmileLock" customModuleProvider="target">
-                                            <rect key="frame" x="101" y="0.0" width="86" height="85"/>
-                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                                            <rect key="frame" x="101" y="0.0" width="86" height="84.5"/>
+                                            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             <userDefinedRuntimeAttributes>
                                                 <userDefinedRuntimeAttribute type="string" keyPath="numberString" value="0"/>
                                             </userDefinedRuntimeAttributes>
                                         </view>
                                         <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="abs-RL-KN4">
-                                            <rect key="frame" x="202" y="0.0" width="86" height="85"/>
+                                            <rect key="frame" x="202" y="0.0" width="86" height="84.5"/>
                                             <fontDescription key="fontDescription" type="system" weight="light" pointSize="22"/>
                                             <state key="normal" title="Delete">
-                                                <color key="titleColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
+                                                <color key="titleColor" red="0.33333333333333331" green="0.33333333333333331" blue="0.33333333333333331" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                             </state>
                                             <connections>
                                                 <action selector="deleteInputString:" destination="iN0-l3-epB" eventType="touchUpInside" id="XDj-11-9x2"/>
@@ -142,7 +147,7 @@
                     </constraints>
                 </stackView>
             </subviews>
-            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
+            <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="custom" customColorSpace="sRGB"/>
             <constraints>
                 <constraint firstItem="tnJ-fF-IrF" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="LXP-fh-hro"/>
                 <constraint firstAttribute="trailing" secondItem="tnJ-fF-IrF" secondAttribute="trailing" id="Uoq-Fg-F9s"/>
diff --git a/SmileLock/Classes/PasswordContainerView.swift b/SmileLock/Classes/PasswordContainerView.swift
index 7497d48..d307e0d 100644
--- a/SmileLock/Classes/PasswordContainerView.swift
+++ b/SmileLock/Classes/PasswordContainerView.swift
@@ -141,7 +141,16 @@ open class PasswordContainerView: UIView {
         deleteButton.titleLabel?.adjustsFontSizeToFitWidth = true
         deleteButton.titleLabel?.minimumScaleFactor = 0.5
         touchAuthenticationEnabled = true
-        let image = touchAuthenticationButton.imageView?.image?.withRenderingMode(.alwaysTemplate)
+        
+        var image = touchAuthenticationButton.imageView?.image?.withRenderingMode(.alwaysTemplate)
+        
+        if #available(iOS 11, *) {
+            if touchIDContext.biometryType == .typeFaceID {
+                let bundle = Bundle(for: type(of: self))
+                image = UIImage(named: "faceid", in: bundle, compatibleWith: nil)?.withRenderingMode(.alwaysTemplate)
+            }
+        }
+        
         touchAuthenticationButton.setImage(image, for: UIControlState())
         touchAuthenticationButton.tintColor = tintColor
     }