diff --git a/Pendu.xcodeproj/project.pbxproj b/Pendu.xcodeproj/project.pbxproj
index 2a176475045c0d3e884bdf7472a6e77b5081f207..f90f64d76555e8cb826a48c720d036bf4ed78470 100644
--- a/Pendu.xcodeproj/project.pbxproj
+++ b/Pendu.xcodeproj/project.pbxproj
@@ -17,6 +17,8 @@
 		BF3C48282A0A1FCD00CE128F /* PenduTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = BF3C48272A0A1FCD00CE128F /* PenduTests.swift */; };
 		BF3C48322A0A1FCD00CE128F /* PenduUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = BF3C48312A0A1FCD00CE128F /* PenduUITests.swift */; };
 		BF3C48342A0A1FCD00CE128F /* PenduUITestsLaunchTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = BF3C48332A0A1FCD00CE128F /* PenduUITestsLaunchTests.swift */; };
+		F817CE902A13AD0C0078F0A5 /* ButtonTemplate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F817CE8F2A13AD0C0078F0A5 /* ButtonTemplate.swift */; };
+		F817CE932A13B9DD0078F0A5 /* whatever it takes.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F817CE922A13B9DC0078F0A5 /* whatever it takes.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -51,6 +53,8 @@
 		BF3C482D2A0A1FCD00CE128F /* PenduUITests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = PenduUITests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		BF3C48312A0A1FCD00CE128F /* PenduUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PenduUITests.swift; sourceTree = "<group>"; };
 		BF3C48332A0A1FCD00CE128F /* PenduUITestsLaunchTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PenduUITestsLaunchTests.swift; sourceTree = "<group>"; };
+		F817CE8F2A13AD0C0078F0A5 /* ButtonTemplate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonTemplate.swift; sourceTree = "<group>"; };
+		F817CE922A13B9DC0078F0A5 /* whatever it takes.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "whatever it takes.ttf"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -101,9 +105,11 @@
 		BF3C480C2A0A1FCA00CE128F /* Pendu */ = {
 			isa = PBXGroup;
 			children = (
+				F817CE912A13B99F0078F0A5 /* Font */,
 				BF3C480D2A0A1FCA00CE128F /* AppDelegate.swift */,
 				BF3C480F2A0A1FCA00CE128F /* SceneDelegate.swift */,
 				BF3C48112A0A1FCA00CE128F /* ViewController.swift */,
+				F817CE8F2A13AD0C0078F0A5 /* ButtonTemplate.swift */,
 				BF3C48132A0A1FCA00CE128F /* Main.storyboard */,
 				BF3C48192A0A1FCD00CE128F /* Assets.xcassets */,
 				BF3C481B2A0A1FCD00CE128F /* LaunchScreen.storyboard */,
@@ -130,6 +136,14 @@
 			path = PenduUITests;
 			sourceTree = "<group>";
 		};
+		F817CE912A13B99F0078F0A5 /* Font */ = {
+			isa = PBXGroup;
+			children = (
+				F817CE922A13B9DC0078F0A5 /* whatever it takes.ttf */,
+			);
+			path = Font;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -234,6 +248,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				F817CE932A13B9DD0078F0A5 /* whatever it takes.ttf in Resources */,
 				BF3C481D2A0A1FCD00CE128F /* LaunchScreen.storyboard in Resources */,
 				BF3C481A2A0A1FCD00CE128F /* Assets.xcassets in Resources */,
 				BF3C48152A0A1FCA00CE128F /* Main.storyboard in Resources */,
@@ -262,6 +277,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				BF3C48122A0A1FCA00CE128F /* ViewController.swift in Sources */,
+				F817CE902A13AD0C0078F0A5 /* ButtonTemplate.swift in Sources */,
 				BF3C480E2A0A1FCA00CE128F /* AppDelegate.swift in Sources */,
 				BF3C48182A0A1FCA00CE128F /* Pendu.xcdatamodeld in Sources */,
 				BF3C48102A0A1FCA00CE128F /* SceneDelegate.swift in Sources */,
diff --git a/Pendu/Assets.xcassets/Image.imageset/Contents.json b/Pendu/Assets.xcassets/Image.imageset/Contents.json
new file mode 100644
index 0000000000000000000000000000000000000000..a19a5492203a8d30fc85ccc30497536a9500155d
--- /dev/null
+++ b/Pendu/Assets.xcassets/Image.imageset/Contents.json
@@ -0,0 +1,20 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Pendu/Assets.xcassets/background.imageset/Contents.json b/Pendu/Assets.xcassets/background.imageset/Contents.json
new file mode 100644
index 0000000000000000000000000000000000000000..db2f75af916e709496f01b2778b0e068b5cd6bb4
--- /dev/null
+++ b/Pendu/Assets.xcassets/background.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "background.jpeg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Pendu/Assets.xcassets/background.imageset/background.jpeg b/Pendu/Assets.xcassets/background.imageset/background.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e4ff81fac8a5ed53e477c99fa0b8d4b79d402a14
Binary files /dev/null and b/Pendu/Assets.xcassets/background.imageset/background.jpeg differ
diff --git a/Pendu/Assets.xcassets/background_table.jpeg b/Pendu/Assets.xcassets/background_table.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e4ff81fac8a5ed53e477c99fa0b8d4b79d402a14
Binary files /dev/null and b/Pendu/Assets.xcassets/background_table.jpeg differ
diff --git a/Pendu/Assets.xcassets/fond_acceuil.imageset/Contents.json b/Pendu/Assets.xcassets/fond_acceuil.imageset/Contents.json
new file mode 100644
index 0000000000000000000000000000000000000000..247ca6594cde37423dac93db4e593bcb2455b04d
--- /dev/null
+++ b/Pendu/Assets.xcassets/fond_acceuil.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "fond_acceuil.png",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Pendu/Assets.xcassets/fond_acceuil.imageset/fond_acceuil.png b/Pendu/Assets.xcassets/fond_acceuil.imageset/fond_acceuil.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb10bb4b47c5d7e3d2f21093004153702b8f6cf7
Binary files /dev/null and b/Pendu/Assets.xcassets/fond_acceuil.imageset/fond_acceuil.png differ
diff --git a/Pendu/Base.lproj/Main.storyboard b/Pendu/Base.lproj/Main.storyboard
index 5c57122b61525e9cddfa57cd9d4b042af2459cf1..f02357fa7c241b18c52eb62344821eff86b4df69 100644
--- a/Pendu/Base.lproj/Main.storyboard
+++ b/Pendu/Base.lproj/Main.storyboard
@@ -15,209 +15,6 @@
                     <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                         <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <subviews>
-                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="nE9-qA-6Ix">
-                                <rect key="frame" x="46" y="123" width="322" height="240"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                            </imageView>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Score : 0" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="omq-me-gdF">
-                                <rect key="frame" x="20" y="44" width="68" height="21"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <nil key="textColor"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="_ _ _ _ _ _ _ _ _ _ _ _ _" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="SHg-wa-kcD">
-                                <rect key="frame" x="46" y="379" width="322" height="21"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <nil key="textColor"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="73k-n4-YgZ">
-                                <rect key="frame" x="46" y="495" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
-                                <size key="titleShadowOffset" width="3" height="0.0"/>
-                                <state key="normal" title="A"/>
-                                <buttonConfiguration key="configuration" style="gray" title="A" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kLf-mA-bVg">
-                                <rect key="frame" x="88" y="495" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="Z" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="3bJ-N7-jgc">
-                                <rect key="frame" x="129" y="495" width="33" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="E" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="tf9-qw-Ven">
-                                <rect key="frame" x="170" y="495" width="33" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="R" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Zzu-Qc-ZJt">
-                                <rect key="frame" x="211" y="495" width="33" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="T" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="7mU-Zt-6vv">
-                                <rect key="frame" x="252" y="495" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="Y" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ewS-Cp-Lc7">
-                                <rect key="frame" x="292" y="495" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="U" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="12E-IQ-Zaw">
-                                <rect key="frame" x="333" y="495" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="I" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="KOj-Ug-mgS">
-                                <rect key="frame" x="46" y="534" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="O" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fJQ-Ci-VQW">
-                                <rect key="frame" x="89" y="534" width="33" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="P" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Lnb-WI-YDQ">
-                                <rect key="frame" x="128" y="534" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="Q" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="FJ2-8A-DHW">
-                                <rect key="frame" x="170" y="534" width="33" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="S" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kTY-bf-pBH">
-                                <rect key="frame" x="210" y="534" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="D" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="21I-AF-jfk">
-                                <rect key="frame" x="253" y="534" width="32" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="F" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="QsT-ik-ztz">
-                                <rect key="frame" x="292" y="534" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="G" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Qnt-oJ-lQO">
-                                <rect key="frame" x="333" y="534" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="H" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="xIc-ue-yHu">
-                                <rect key="frame" x="46" y="573" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="J" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="NX7-3R-sMa">
-                                <rect key="frame" x="88" y="573" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="K" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Vx5-qI-Z67">
-                                <rect key="frame" x="130" y="573" width="32" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="L" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Aaq-nt-wFp">
-                                <rect key="frame" x="168" y="573" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="M" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ZvI-jr-ghu">
-                                <rect key="frame" x="210" y="573" width="38" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="W" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="frz-93-VjS">
-                                <rect key="frame" x="252" y="573" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="X" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="zLJ-5e-n9t">
-                                <rect key="frame" x="293" y="573" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="C" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="H4a-DO-d5B">
-                                <rect key="frame" x="334" y="573" width="34" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="V" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="mVi-4h-g5o">
-                                <rect key="frame" x="168" y="612" width="35" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="B" subtitle=""/>
-                            </button>
-                            <button opaque="NO" contentMode="scaleAspectFill" semanticContentAttribute="spatial" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Ti9-Io-1RF">
-                                <rect key="frame" x="210" y="612" width="37" height="31"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <size key="titleShadowOffset" width="2" height="0.0"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="N" subtitle=""/>
-                            </button>
-                        </subviews>
                         <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                         <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                     </view>
@@ -226,7 +23,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="28.985507246376812" y="83.705357142857139"/>
+            <point key="canvasLocation" x="322" y="106"/>
         </scene>
     </scenes>
     <resources>
diff --git a/Pendu/ButtonTemplate.swift b/Pendu/ButtonTemplate.swift
new file mode 100644
index 0000000000000000000000000000000000000000..a44c2e0826574d77f85b78f5f0d3fb7633ef8d2d
--- /dev/null
+++ b/Pendu/ButtonTemplate.swift
@@ -0,0 +1,42 @@
+import UIKit
+
+
+struct ButtonTemplateViewModel {
+    let primaryColor: String
+}
+
+final class ButtonTemplate: UIButton {
+    private let primaryLabel: UILabel = {
+        let label = UILabel()
+        label.numberOfLines = 1
+        label.textAlignment = .center
+        label.textColor = .white
+        label.font = .systemFont(ofSize: 20, weight: .semibold)
+        return label
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        addSubview(primaryLabel)
+        clipsToBounds = true
+        layer.cornerRadius = 8
+        layer.borderWidth = 1
+        layer.borderColor = UIColor.secondarySystemBackground.cgColor
+        backgroundColor = .systemGreen
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError()
+    }
+    
+    func configure(with viewModel: ButtonTemplateViewModel) {
+        primaryLabel.text = viewModel.primaryColor
+    }
+    
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        primaryLabel.frame = CGRect(x: 0, y: 5, width: frame.size.width, height: frame.size.height/2)
+    }
+    
+    
+}
diff --git a/Pendu/Font/whatever it takes.ttf b/Pendu/Font/whatever it takes.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..b178c748d3f16a6948b9dfbb7557fe2b58a73dbb
Binary files /dev/null and b/Pendu/Font/whatever it takes.ttf differ
diff --git a/Pendu/Info.plist b/Pendu/Info.plist
index dd3c9afdae35805086796848ae7dfa52ec858a07..e73d9ce36d9ece2a3f1c2090edf82c3cd9e6d90c 100644
--- a/Pendu/Info.plist
+++ b/Pendu/Info.plist
@@ -21,5 +21,9 @@
 			</array>
 		</dict>
 	</dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>whatever it takes.ttf</string>
+	</array>
 </dict>
 </plist>
diff --git a/Pendu/ViewController.swift b/Pendu/ViewController.swift
index 688be3ead8c69b86dbda310fb71c17d3a6452b2b..3088ee9be03d422d9368630427c2a23534b23352 100644
--- a/Pendu/ViewController.swift
+++ b/Pendu/ViewController.swift
@@ -7,11 +7,47 @@
 
 import UIKit
 
-class ViewController: UIViewController {
+extension UIView {
+    func addBackground(imageName: String = "fond_acceuil.png", contentMode: UIView.ContentMode = .scaleToFill) {
+        // setup the UIImageView
+        let backgroundImageView = UIImageView(frame: UIScreen.main.bounds)
+        backgroundImageView.image = UIImage(named: imageName)
+        backgroundImageView.contentMode = contentMode
+        backgroundImageView.translatesAutoresizingMaskIntoConstraints = false
+
+        addSubview(backgroundImageView)
+        sendSubviewToBack(backgroundImageView)
+
+        // adding NSLayoutConstraints
+        let leadingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0)
+        let trailingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0)
+        let topConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
+        let bottomConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0.0)
+
+        NSLayoutConstraint.activate([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint])
+    }
+}
 
+class ViewController: UIViewController {
+    
     override func viewDidLoad() {
+        view.addBackground()
         super.viewDidLoad()
-        // Do any additional setup after loading the view.
+        
+        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
+        label.center = CGPoint(x: 160, y: 230)
+        label.font = UIFont(name: "whatever it takes", size: 40)
+        label.textAlignment = .center
+        label.textColor = UIColor.white
+        label.text = "Pendu"
+        
+        self.view.addSubview(label)
+        
+//
+//        let ButtonLetter = ButtonTemplate(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
+//        view.addSubview(ButtonLetter)
+//        ButtonLetter.center = view.center
+//        ButtonLetter.configure(with: ButtonTemplateViewModel(primaryColor: "A"))
     }