diff --git a/README.md b/README.md
index 55f9104..c8bc3b4 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ A library for make a beautiful Passcode Lock View, also support Touch ID.
 
 ``` swift
 let kPasswordDigit = 6
-passwordContainerView = PasswordContainerView.createWithDigit(kPasswordDigit)
+passwordContainerView = PasswordContainerView.create(withDigit: kPasswordDigit)
 ```
 
 #### 2. Passcode input completed delegate callback.
diff --git a/SmileLock-Example/SmileLock-Example/PasswordLogin.storyboard b/SmileLock-Example/SmileLock-Example/PasswordLogin.storyboard
index 961fbe7..6fb9931 100644
--- a/SmileLock-Example/SmileLock-Example/PasswordLogin.storyboard
+++ b/SmileLock-Example/SmileLock-Example/PasswordLogin.storyboard
@@ -1,32 +1,35 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="10117" systemVersion="16A254g" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="M9T-pA-Bjj">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="M9T-pA-Bjj">
+    <device id="retina5_9" 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="13772"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
         <!--Home View Controller-->
         <scene sceneID="AUa-Py-mOk">
             <objects>
                 <viewController id="M9T-pA-Bjj" customClass="HomeViewController" customModule="SmileLock_Example" customModuleProvider="target" sceneMemberID="viewController">
-                    <layoutGuides>
-                        <viewControllerLayoutGuide type="top" id="qdX-F6-Mgd"/>
-                        <viewControllerLayoutGuide type="bottom" id="GUc-3J-RKn"/>
-                    </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="fgw-9g-gwd">
-                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="fish" translatesAutoresizingMaskIntoConstraints="NO" id="mHM-fQ-E23">
-                                <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
                             </imageView>
                             <visualEffectView opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="eOX-mm-vId">
-                                <rect key="frame" x="245" y="278" width="110" height="44"/>
+                                <rect key="frame" x="132.66666666666666" y="384" width="110" height="44"/>
                                 <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="Nng-8y-oom">
                                     <rect key="frame" x="0.0" y="0.0" width="110" height="44"/>
                                     <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                     <subviews>
                                         <visualEffectView opaque="NO" contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="aoP-EI-P0I">
                                             <rect key="frame" x="-245" y="-278" width="0.0" height="0.0"/>
+                                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                             <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" ambiguous="YES" id="W9w-DA-OMo">
                                                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                             </view>
@@ -48,29 +51,30 @@
                                 </userDefinedRuntimeAttributes>
                             </visualEffectView>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="B7b-qI-7hO">
-                                <rect key="frame" x="245" y="278" width="110" height="44"/>
+                                <rect key="frame" x="132.66666666666666" y="384" width="110" height="44"/>
                                 <fontDescription key="fontDescription" type="boldSystem" pointSize="15"/>
                                 <state key="normal" title="Show LockUI">
-                                    <color key="titleColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
+                                    <color key="titleColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                 </state>
                                 <connections>
                                     <action selector="presentLoginVC:" destination="M9T-pA-Bjj" eventType="touchUpInside" id="NRF-wo-q5g"/>
                                 </connections>
                             </button>
                         </subviews>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
-                            <constraint firstItem="GUc-3J-RKn" firstAttribute="top" secondItem="mHM-fQ-E23" secondAttribute="bottom" id="6kj-M9-nVS"/>
+                            <constraint firstAttribute="trailing" secondItem="mHM-fQ-E23" secondAttribute="trailing" id="9t4-XH-HMS"/>
                             <constraint firstItem="B7b-qI-7hO" firstAttribute="height" secondItem="eOX-mm-vId" secondAttribute="height" id="Eo7-9y-1v4"/>
-                            <constraint firstItem="eOX-mm-vId" firstAttribute="centerX" secondItem="fgw-9g-gwd" secondAttribute="centerX" id="G4R-Ft-voK"/>
+                            <constraint firstItem="eOX-mm-vId" firstAttribute="centerX" secondItem="x6v-Su-xVq" secondAttribute="centerX" id="G4R-Ft-voK"/>
                             <constraint firstItem="B7b-qI-7hO" firstAttribute="centerY" secondItem="fgw-9g-gwd" secondAttribute="centerY" id="OcE-rz-UPN"/>
-                            <constraint firstItem="mHM-fQ-E23" firstAttribute="leading" secondItem="fgw-9g-gwd" secondAttribute="leading" id="YPN-ox-sbw"/>
-                            <constraint firstAttribute="trailing" secondItem="mHM-fQ-E23" secondAttribute="trailing" id="ZVW-96-AQM"/>
+                            <constraint firstItem="mHM-fQ-E23" firstAttribute="leading" secondItem="x6v-Su-xVq" secondAttribute="leading" id="Rrk-jV-dQB"/>
+                            <constraint firstAttribute="bottom" secondItem="mHM-fQ-E23" secondAttribute="bottom" id="aqv-LK-Xpt"/>
                             <constraint firstItem="eOX-mm-vId" firstAttribute="centerY" secondItem="fgw-9g-gwd" secondAttribute="centerY" id="ch5-DU-Qyz"/>
                             <constraint firstItem="eOX-mm-vId" firstAttribute="width" secondItem="B7b-qI-7hO" secondAttribute="width" id="gDT-Nh-Jby"/>
-                            <constraint firstItem="mHM-fQ-E23" firstAttribute="top" secondItem="fgw-9g-gwd" secondAttribute="top" id="hnp-hh-mX4"/>
-                            <constraint firstItem="B7b-qI-7hO" firstAttribute="centerX" secondItem="fgw-9g-gwd" secondAttribute="centerX" id="sHs-zZ-Ypt"/>
+                            <constraint firstItem="mHM-fQ-E23" firstAttribute="top" secondItem="fgw-9g-gwd" secondAttribute="top" id="qPN-aK-e2b"/>
+                            <constraint firstItem="B7b-qI-7hO" firstAttribute="centerX" secondItem="x6v-Su-xVq" secondAttribute="centerX" id="sHs-zZ-Ypt"/>
                         </constraints>
+                        <viewLayoutGuide key="safeArea" id="x6v-Su-xVq"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="dEz-vX-TKh" userLabel="First Responder" sceneMemberID="firstResponder"/>
@@ -81,43 +85,30 @@
         <scene sceneID="3Az-R5-e8Y">
             <objects>
                 <viewController storyboardIdentifier="PasswordLoginViewController" id="mxy-Dr-eHS" customClass="PasswordLoginViewController" customModule="SmileLock_Example" customModuleProvider="target" sceneMemberID="viewController">
-                    <layoutGuides>
-                        <viewControllerLayoutGuide type="top" id="OSz-w8-d5Q"/>
-                        <viewControllerLayoutGuide type="bottom" id="8gB-di-KOz"/>
-                    </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="SUk-I1-XQD">
                         <rect key="frame" x="0.0" y="0.0" width="600" height="900"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="26" translatesAutoresizingMaskIntoConstraints="NO" id="eGM-tu-vbC">
-                                <rect key="frame" x="178" y="427" width="244" height="46"/>
+                                <rect key="frame" x="181.33333333333337" y="427.33333333333331" width="237.66666666666663" height="45.666666666666686"/>
                                 <subviews>
-                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="6" translatesAutoresizingMaskIntoConstraints="NO" id="ekh-Db-IUo">
-                                        <rect key="frame" x="0.0" y="0.0" width="244" height="46"/>
-                                        <subviews>
-                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="5" translatesAutoresizingMaskIntoConstraints="NO" id="IK8-YT-FI2">
-                                                <rect key="frame" x="0.0" y="0.0" width="244" height="46"/>
-                                                <subviews>
-                                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Enter Password" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="h4e-n0-DYq">
-                                                        <rect key="frame" x="0.0" y="0.0" width="244" height="46"/>
-                                                        <fontDescription key="fontDescription" type="system" weight="thin" pointSize="38"/>
-                                                        <color key="textColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
-                                                        <nil key="highlightedColor"/>
-                                                    </label>
-                                                </subviews>
-                                            </stackView>
-                                        </subviews>
-                                    </stackView>
+                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Enter Password" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="h4e-n0-DYq">
+                                        <rect key="frame" x="0.0" y="0.0" width="237.66666666666666" height="45.666666666666664"/>
+                                        <fontDescription key="fontDescription" type="system" weight="thin" pointSize="38"/>
+                                        <color key="textColor" red="0.3333333432674408" green="0.3333333432674408" blue="0.3333333432674408" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                        <nil key="highlightedColor"/>
+                                    </label>
                                 </subviews>
                             </stackView>
                         </subviews>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstItem="eGM-tu-vbC" firstAttribute="centerY" secondItem="SUk-I1-XQD" secondAttribute="centerY" id="0ar-Fu-hCu"/>
-                            <constraint firstItem="eGM-tu-vbC" firstAttribute="centerX" secondItem="SUk-I1-XQD" secondAttribute="centerX" id="9dO-f2-Wa1"/>
-                            <constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="eGM-tu-vbC" secondAttribute="trailing" constant="50" id="LwR-pV-X34"/>
-                            <constraint firstItem="eGM-tu-vbC" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="SUk-I1-XQD" secondAttribute="leading" constant="50" id="bf1-wv-DLT"/>
+                            <constraint firstItem="eGM-tu-vbC" firstAttribute="centerX" secondItem="lci-zW-QWo" secondAttribute="centerX" id="9dO-f2-Wa1"/>
+                            <constraint firstItem="lci-zW-QWo" firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="eGM-tu-vbC" secondAttribute="trailing" constant="50" id="LwR-pV-X34"/>
+                            <constraint firstItem="eGM-tu-vbC" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="lci-zW-QWo" secondAttribute="leading" constant="50" id="bf1-wv-DLT"/>
                         </constraints>
+                        <viewLayoutGuide key="safeArea" id="lci-zW-QWo"/>
                     </view>
                     <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
                     <size key="freeformSize" width="600" height="900"/>
@@ -127,16 +118,12 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="61N-vg-HIo" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="196" y="334"/>
+            <point key="canvasLocation" x="642" y="216"/>
         </scene>
         <!--Blur Password Login View Controller-->
         <scene sceneID="hf7-qn-5rZ">
             <objects>
                 <viewController storyboardIdentifier="BlurPasswordLoginViewController" id="lBr-lM-PMl" customClass="BlurPasswordLoginViewController" customModule="SmileLock_Example" customModuleProvider="target" sceneMemberID="viewController">
-                    <layoutGuides>
-                        <viewControllerLayoutGuide type="top" id="PvU-cr-EdY"/>
-                        <viewControllerLayoutGuide type="bottom" id="3oO-rr-SgG"/>
-                    </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="viu-Sf-YQU">
                         <rect key="frame" x="0.0" y="0.0" width="600" height="900"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
@@ -154,24 +141,14 @@
                                                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                 <subviews>
                                                     <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="26" translatesAutoresizingMaskIntoConstraints="NO" id="Ev8-xF-ent">
-                                                        <rect key="frame" x="178" y="427" width="244" height="46"/>
+                                                        <rect key="frame" x="181.33333333333337" y="427.33333333333331" width="237.66666666666663" height="45.666666666666686"/>
                                                         <subviews>
-                                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="6" translatesAutoresizingMaskIntoConstraints="NO" id="LLF-Ta-92n">
-                                                                <rect key="frame" x="0.0" y="0.0" width="244" height="46"/>
-                                                                <subviews>
-                                                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="5" translatesAutoresizingMaskIntoConstraints="NO" id="jRX-mN-9Gp">
-                                                                        <rect key="frame" x="0.0" y="0.0" width="244" height="46"/>
-                                                                        <subviews>
-                                                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Enter Password" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="0TM-Ek-dnq">
-                                                                                <rect key="frame" x="0.0" y="0.0" width="244" height="46"/>
-                                                                                <fontDescription key="fontDescription" type="system" weight="thin" pointSize="38"/>
-                                                                                <color key="textColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
-                                                                                <nil key="highlightedColor"/>
-                                                                            </label>
-                                                                        </subviews>
-                                                                    </stackView>
-                                                                </subviews>
-                                                            </stackView>
+                                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Enter Password" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="0TM-Ek-dnq">
+                                                                <rect key="frame" x="0.0" y="0.0" width="237.66666666666666" height="45.666666666666664"/>
+                                                                <fontDescription key="fontDescription" type="system" weight="thin" pointSize="38"/>
+                                                                <color key="textColor" red="0.3333333432674408" green="0.3333333432674408" blue="0.3333333432674408" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                                                <nil key="highlightedColor"/>
+                                                            </label>
                                                         </subviews>
                                                     </stackView>
                                                 </subviews>
@@ -197,13 +174,14 @@
                                 <blurEffect style="dark"/>
                             </visualEffectView>
                         </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="F7e-cU-I9V" firstAttribute="leading" secondItem="viu-Sf-YQU" secondAttribute="leading" id="P4E-Ia-Sca"/>
+                            <constraint firstItem="F7e-cU-I9V" firstAttribute="leading" secondItem="7sS-1t-bs5" secondAttribute="leading" id="P4E-Ia-Sca"/>
+                            <constraint firstAttribute="bottom" secondItem="F7e-cU-I9V" secondAttribute="bottom" id="iA4-MX-CHa"/>
                             <constraint firstItem="F7e-cU-I9V" firstAttribute="top" secondItem="viu-Sf-YQU" secondAttribute="top" id="nW3-xj-EIZ"/>
-                            <constraint firstAttribute="trailing" secondItem="F7e-cU-I9V" secondAttribute="trailing" id="w6r-Y1-QBQ"/>
-                            <constraint firstItem="3oO-rr-SgG" firstAttribute="top" secondItem="F7e-cU-I9V" secondAttribute="bottom" id="yef-qB-1ac"/>
+                            <constraint firstItem="7sS-1t-bs5" firstAttribute="trailing" secondItem="F7e-cU-I9V" secondAttribute="trailing" id="w6r-Y1-QBQ"/>
                         </constraints>
+                        <viewLayoutGuide key="safeArea" id="7sS-1t-bs5"/>
                     </view>
                     <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
                     <size key="freeformSize" width="600" height="900"/>