From 35e5d8e9a52a19253a48aedbd0d4589e3a180c68 Mon Sep 17 00:00:00 2001
From: Tadao Tanikawa <tanikawa.tadao@jp.panasonic.com>
Date: Wed, 20 Dec 2017 22:20:12 +0900
Subject: Update to new color scheme

The color scheme has been changed to new one.

Bug-AGL: SPEC-673

Change-Id: I4aaa397766dd815853ad6a361759774faa986e1a
Signed-off-by: Tadao Tanikawa <tanikawa.tadao@jp.panasonic.com>
---
 app/images/HMI_ContactScreen_SearchIcon-01.svg     | 122 ++++-------
 app/images/HMI_Phone_Button_0_Active-01.svg        | 206 ++++---------------
 app/images/HMI_Phone_Button_0_Inactive-01.svg      | 170 ++++------------
 app/images/HMI_Phone_Button_1_Active-01.svg        | 186 ++++-------------
 app/images/HMI_Phone_Button_1_Inactive-01.svg      | 183 ++++++-----------
 app/images/HMI_Phone_Button_2_Active-01.svg        | 208 ++++---------------
 app/images/HMI_Phone_Button_2_Inactive-01.svg      | 212 +++++++------------
 app/images/HMI_Phone_Button_3_Active-01.svg        | 224 ++++++---------------
 app/images/HMI_Phone_Button_3_Inactive-01.svg      | 164 +++------------
 app/images/HMI_Phone_Button_4_Active-01.svg        | 206 ++++---------------
 app/images/HMI_Phone_Button_4_Inactive-01.svg      | 210 +++++++------------
 app/images/HMI_Phone_Button_5_Active-01.svg        | 206 ++++---------------
 app/images/HMI_Phone_Button_5_Inactive-01.svg      | 210 +++++++------------
 app/images/HMI_Phone_Button_6_Active-01.svg        | 206 ++++---------------
 app/images/HMI_Phone_Button_6_Inactive-01.svg      | 164 +++------------
 app/images/HMI_Phone_Button_7_Active-01.svg        | 200 +++---------------
 app/images/HMI_Phone_Button_7_Inactive-01.svg      | 170 ++++------------
 app/images/HMI_Phone_Button_8_Active-01.svg        | 206 ++++---------------
 app/images/HMI_Phone_Button_8_Inactive-01.svg      | 164 +++------------
 app/images/HMI_Phone_Button_9_Active-01.svg        | 204 ++++---------------
 app/images/HMI_Phone_Button_9_Inactive-01.svg      | 162 +++------------
 app/images/HMI_Phone_Button_Blank_Active-01.svg    | 197 +++---------------
 app/images/HMI_Phone_Button_Blank_Inactive-01.svg  | 152 +++-----------
 .../HMI_Phone_Button_NumberSign_Active-01.svg      | 224 ++++++---------------
 .../HMI_Phone_Button_NumberSign_Inactive-01.svg    | 170 ++++------------
 app/images/HMI_Phone_Button_asterisk_Active-01.svg | 206 ++++---------------
 .../HMI_Phone_Button_asterisk_Inactive-01.svg      | 210 +++++++------------
 app/images/HMI_Phone_Call.svg                      | 144 ++++---------
 app/images/HMI_Phone_Contacts-01.svg               | 127 ++++--------
 29 files changed, 1244 insertions(+), 4169 deletions(-)

diff --git a/app/images/HMI_ContactScreen_SearchIcon-01.svg b/app/images/HMI_ContactScreen_SearchIcon-01.svg
index f45a3c7..f51b35e 100644
--- a/app/images/HMI_ContactScreen_SearchIcon-01.svg
+++ b/app/images/HMI_ContactScreen_SearchIcon-01.svg
@@ -1,85 +1,41 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 92 92"
-   style="enable-background:new 0 0 92 92;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_ContactScreen_SearchIcon-01.svg"><metadata
-     id="metadata77"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs75" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview73"
-     showgrid="false"
-     inkscape:zoom="2.5652174"
-     inkscape:cx="-276.97458"
-     inkscape:cy="-16.372881"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 92"
+	 style="enable-background:new 0 0 92 92;" xml:space="preserve">
+<style type="text/css">
 	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
 	.st1{fill:url(#SVGID_1_);}
-	.st2{display:none;}
-	.st3{display:inline;opacity:0.15;fill:url(#SVGID_2_);}
-	.st4{display:inline;opacity:0.35;fill:url(#SVGID_3_);}
-	.st5{display:inline;}
-	.st6{opacity:0.15;fill:url(#SVGID_4_);}
-	.st7{opacity:0.15;fill:url(#SVGID_5_);stroke:url(#SVGID_6_);stroke-miterlimit:10;}
-	.st8{fill:url(#SVGID_7_);}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><g
-             id="g13"><path
-               class="st0"
-               d="M51.5,22.8c-9.6,0-17.4,7.7-17.4,17.3c0,3.5,1,6.7,2.8,9.4L23.4,62.9c-0.3,0.3-0.4,0.9-0.1,1.2l2.5,2.5       l2.4,2.4c0.3,0.3,0.8,0.3,1.2-0.1l13.7-13.7c2.5,1.3,5.3,2.1,8.3,2.1c9.6,0,17.4-7.7,17.4-17.3C68.9,30.5,61.1,22.8,51.5,22.8z       "
-               id="path15" /><path
-               class="st0"
-               d="M63.6,40.2c0,6.7-5.4,12.1-12.1,12.1c-6.7,0-12.1-5.4-12.1-12.1c0-6.7,5.4-12.1,12.1-12.1"
-               id="path17" /></g><g
-             id="g19"><linearGradient
-               id="SVGID_1_"
-               gradientUnits="userSpaceOnUse"
-               x1="-20.5235"
-               y1="114.6983"
-               x2="117.909"
-               y2="-18.0096"
-               gradientTransform="matrix(1 5.464556e-03 -5.464556e-03 1 -2.6463 -2.4025)"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop22" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop24" /></linearGradient><path
-               class="st1"
-               d="M46,92c-0.1,0-0.2,0-0.3,0C20.4,91.9-0.1,71.1,0,45.7C0.1,20.5,20.7,0,46,0c0.1,0,0.2,0,0.3,0       C71.6,0.1,92.1,20.9,92,46.3l0,0C91.9,71.5,71.3,92,46,92z M46,1.6C21.6,1.6,1.7,21.4,1.6,45.8C1.5,70.2,21.3,90.3,45.8,90.4       c0.1,0,0.2,0,0.2,0c24.4,0,44.3-19.8,44.4-44.1C90.5,21.8,70.7,1.7,46.2,1.6C46.2,1.6,46.1,1.6,46,1.6z"
-               id="path26" /></g></g></g></g></switch></svg>
\ No newline at end of file
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<g>
+				<path class="st0" d="M51.5,22.8c-9.6,0-17.4,7.7-17.4,17.3c0,3.5,1,6.7,2.8,9.4L23.4,62.9c-0.3,0.3-0.4,0.9-0.1,1.2l2.5,2.5
+					l2.4,2.4c0.3,0.3,0.8,0.3,1.2-0.1l13.7-13.7c2.5,1.3,5.3,2.1,8.3,2.1c9.6,0,17.4-7.7,17.4-17.3C68.9,30.5,61.1,22.8,51.5,22.8z"
+					/>
+				<path class="st0" d="M63.6,40.2c0,6.7-5.4,12.1-12.1,12.1c-6.7,0-12.1-5.4-12.1-12.1c0-6.7,5.4-12.1,12.1-12.1"/>
+			</g>
+			<g>
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-20.5235" y1="114.6983" x2="117.909" y2="-18.0096" gradientTransform="matrix(1 5.464556e-03 -5.464556e-03 1 -2.6463 -2.4025)">
+					<stop  offset="0" style="stop-color:#00ADDC"/>
+					<stop  offset="1" style="stop-color:#6BFBFF"/>
+				</linearGradient>
+				<path class="st1" d="M46,92c-0.1,0-0.2,0-0.3,0C20.4,91.9-0.1,71.1,0,45.7C0.1,20.5,20.7,0,46,0c0.1,0,0.2,0,0.3,0
+					C71.6,0.1,92.1,20.9,92,46.3l0,0C91.9,71.5,71.3,92,46,92z M46,1.6C21.6,1.6,1.7,21.4,1.6,45.8C1.5,70.2,21.3,90.3,45.8,90.4
+					c0.1,0,0.2,0,0.2,0c24.4,0,44.3-19.8,44.4-44.1C90.5,21.8,70.7,1.7,46.2,1.6C46.2,1.6,46.1,1.6,46,1.6z"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_0_Active-01.svg b/app/images/HMI_Phone_Button_0_Active-01.svg
index 27c55d6..a1e2e94 100644
--- a/app/images/HMI_Phone_Button_0_Active-01.svg
+++ b/app/images/HMI_Phone_Button_0_Active-01.svg
@@ -1,170 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_0_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-515.27118"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">0</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1.1917" y1="168.219" x2="172.7222" y2="3.3114">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1" y="1" class="st0" width="169.5" height="169.5"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.6228 111.3868)" class="st1 st2 st3">0</text>
+			<rect x="1" y="1" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_0_Inactive-01.svg b/app/images/HMI_Phone_Button_0_Inactive-01.svg
index f5bc78f..b5f1ecd 100644
--- a/app/images/HMI_Phone_Button_0_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_0_Inactive-01.svg
@@ -1,134 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_0_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-513.08474"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">0</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:url(#SVGID_1_);}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.8575 111.6216)" class="st0 st1 st2">0</text>
+			<g>
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+					<stop  offset="0" style="stop-color:#00ADDC"/>
+					<stop  offset="1" style="stop-color:#6BFBFF"/>
+				</linearGradient>
+				<path class="st3" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_1_Active-01.svg b/app/images/HMI_Phone_Button_1_Active-01.svg
index b13c772..51dcac7 100644
--- a/app/images/HMI_Phone_Button_1_Active-01.svg
+++ b/app/images/HMI_Phone_Button_1_Active-01.svg
@@ -1,154 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_1_Active-01.svg"><metadata
-     id="metadata89"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs87" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview85"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-405.22034"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{display:none;}
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
 	.st2{font-family:'Roboto-Light';}
 	.st3{font-size:78.8169px;}
-	.st4{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st5{display:none;fill:#66FF99;}
-	.st6{fill:url(#SVGID_4_);}
-	.st7{opacity:0.35;fill:url(#SVGID_5_);}
-	.st8{opacity:0.15;fill:url(#SVGID_6_);}
-	.st9{opacity:0.15;fill:url(#SVGID_7_);stroke:url(#SVGID_8_);stroke-miterlimit:10;}
-	.st10{fill:#FFFFFF;}
-	.st11{fill:url(#SVGID_9_);}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop45" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st7"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><g
-           id="g51"><linearGradient
-             id="SVGID_6_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop54" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop56" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st8"
-             width="169.5"
-             height="169.5"
-             id="rect58" /><text
-             transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-             class="st2 st3"
-             id="text60">1</text>
-<linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop63" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop65" /></linearGradient><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop70" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st9"
-             width="170"
-             height="170"
-             id="rect72" /><text
-             transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-             class="st10 st2 st3"
-             id="text74">1</text>
-<g
-             id="g76"><linearGradient
-               id="SVGID_9_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop79" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop81" /></linearGradient><path
-               class="st11"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path83" /></g></g></g></g></switch></svg>
\ No newline at end of file
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1.1917" y1="168.219" x2="172.7222" y2="3.3114">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1" y="1" class="st0" width="169.5" height="169.5"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.839 111.3834)" class="st1 st2 st3">1</text>
+			<rect x="1" y="1" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_1_Inactive-01.svg b/app/images/HMI_Phone_Button_1_Inactive-01.svg
index e70f5bf..baa0b80 100644
--- a/app/images/HMI_Phone_Button_1_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_1_Inactive-01.svg
@@ -1,49 +1,19 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_1_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-124.77488"
-     inkscape:cy="85.999998"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
 	.st0{display:none;}
 	.st1{display:inline;}
 	.st2{opacity:0.15;fill:url(#SVGID_1_);}
@@ -52,84 +22,43 @@
 	.st5{display:inline;fill:#66FF99;}
 	.st6{font-family:'Roboto-Light';}
 	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#66FF99;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1,0.00546,-0.00546,1,64.0738,111.6182)"
-           class="st13 st6 st7"
-           id="text88"
-           style="font-size:78.81690216px;font-family:Roboto-Light;display:inline;fill:#66ff99">1</text>
-</g></g></switch></svg>
\ No newline at end of file
+	.st8{fill:#FFFFFF;}
+	.st9{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="Inactive" class="st0">
+			<g class="st1">
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st2" width="169.5" height="169.5"/>
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1" y1="171" x2="171" y2="1">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-1.7107" y1="169.1686" x2="173.7107" y2="2.8314">
+					<stop  offset="0" style="stop-color:#8BC53F"/>
+					<stop  offset="1" style="stop-color:#0DF9FF"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st3" width="170" height="170"/>
+				<g>
+					<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+						<stop  offset="0" style="stop-color:#59FF7F"/>
+						<stop  offset="1" style="stop-color:#6BFBFF"/>
+					</linearGradient>
+					<path class="st4" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+				</g>
+			</g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)" class="st5 st6 st7">1</text>
+		</g>
+		<g id="Active">
+			<g>
+				<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.839 111.3834)" class="st8 st6 st7">1</text>
+				<rect x="1" y="1" class="st9" width="169.5" height="169.5"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_2_Active-01.svg b/app/images/HMI_Phone_Button_2_Active-01.svg
index a84f089..90a8880 100644
--- a/app/images/HMI_Phone_Button_2_Active-01.svg
+++ b/app/images/HMI_Phone_Button_2_Active-01.svg
@@ -1,170 +1,38 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_2_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-466.07627"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">2</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<g>
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+					<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+					<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+				<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.8568 111.6179)" class="st1 st2 st3">2</text>
+			</g>
+			<rect x="1.2" y="1.2" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_2_Inactive-01.svg b/app/images/HMI_Phone_Button_2_Inactive-01.svg
index 5b665fd..21397fe 100644
--- a/app/images/HMI_Phone_Button_2_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_2_Inactive-01.svg
@@ -1,134 +1,78 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_2_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-469.35593"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">2</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+	.st4{display:none;}
+	.st5{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+	.st6{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+	.st7{display:inline;}
+	.st8{opacity:0.15;fill:url(#SVGID_3_);}
+	.st9{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+	.st10{fill:url(#SVGID_6_);}
+	.st11{display:inline;fill:#FFFFFF;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="Inactive">
+			<g>
+				<g>
+					<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.8568 111.6179)" class="st0 st1 st2">2</text>
+				</g>
+				<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+			</g>
+		</g>
+		<g id="Active" class="st4">
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+				<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				<stop  offset="1" style="stop-color:#000000"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st5" width="169.5" height="169.5"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#5DFE9F;stop-opacity:0.94"/>
+				<stop  offset="0.6043" style="stop-color:#6BFBFF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st6" width="169.5" height="169.5"/>
+			<g class="st7">
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st8" width="169.5" height="169.5"/>
+				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1" y1="171" x2="171" y2="1">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-1.7107" y1="169.1686" x2="173.7107" y2="2.8314">
+					<stop  offset="0" style="stop-color:#8BC53F"/>
+					<stop  offset="1" style="stop-color:#0DF9FF"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st9" width="170" height="170"/>
+				<g>
+					<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+						<stop  offset="0" style="stop-color:#59FF7F"/>
+						<stop  offset="1" style="stop-color:#6BFBFF"/>
+					</linearGradient>
+					<path class="st10" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+				</g>
+			</g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)" class="st11 st1 st2">2</text>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_3_Active-01.svg b/app/images/HMI_Phone_Button_3_Active-01.svg
index d5524d9..5d824ad 100644
--- a/app/images/HMI_Phone_Button_3_Active-01.svg
+++ b/app/images/HMI_Phone_Button_3_Active-01.svg
@@ -1,49 +1,19 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_3_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-591.06779"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
 	.st0{display:none;}
 	.st1{display:inline;}
 	.st2{opacity:0.15;fill:url(#SVGID_1_);}
@@ -52,119 +22,49 @@
 	.st5{display:inline;fill:#66FF99;}
 	.st6{font-family:'Roboto-Light';}
 	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">3</text>
-</g></g></switch></svg>
\ No newline at end of file
+	.st8{opacity:0.35;fill:url(#SVGID_5_);}
+	.st9{fill:#FFFFFF;}
+	.st10{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="Inactive" class="st0">
+			<g class="st1">
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st2" width="169.5" height="169.5"/>
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1" y1="171" x2="171" y2="1">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-1.7107" y1="169.1686" x2="173.7107" y2="2.8314">
+					<stop  offset="0" style="stop-color:#8BC53F"/>
+					<stop  offset="1" style="stop-color:#0DF9FF"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st3" width="170" height="170"/>
+				<g>
+					<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+						<stop  offset="0" style="stop-color:#59FF7F"/>
+						<stop  offset="1" style="stop-color:#6BFBFF"/>
+					</linearGradient>
+					<path class="st4" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+				</g>
+			</g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)" class="st5 st6 st7">2</text>
+		</g>
+		<g id="Active">
+			<g>
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+					<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+					<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st8" width="169.5" height="169.5"/>
+				<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0754 111.618)" class="st9 st6 st7">3</text>
+				<rect x="1.2" y="1.2" class="st10" width="169.5" height="169.5"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_3_Inactive-01.svg b/app/images/HMI_Phone_Button_3_Inactive-01.svg
index 9cb9553..a931f3f 100644
--- a/app/images/HMI_Phone_Button_3_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_3_Inactive-01.svg
@@ -1,134 +1,30 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_3_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-555.35593"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">3</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0754 111.618)" class="st0 st1 st2">3</text>
+			<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_4_Active-01.svg b/app/images/HMI_Phone_Button_4_Active-01.svg
index 8952bd0..42539a2 100644
--- a/app/images/HMI_Phone_Button_4_Active-01.svg
+++ b/app/images/HMI_Phone_Button_4_Active-01.svg
@@ -1,170 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_4_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-556.81356"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">4</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<polyline class="st0" points="1.2,170.8 1.2,1.2 170.8,1.2 170.8,170.8 			"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6191)" class="st1 st2 st3">4</text>
+			<polyline class="st4" points="1.2,170.8 1.2,1.2 170.8,1.2 170.8,170.8 			"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_4_Inactive-01.svg b/app/images/HMI_Phone_Button_4_Inactive-01.svg
index 6085cc4..82bd2ca 100644
--- a/app/images/HMI_Phone_Button_4_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_4_Inactive-01.svg
@@ -1,134 +1,76 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_4_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-458.42373"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">4</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+	.st4{display:none;}
+	.st5{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+	.st6{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+	.st7{display:inline;}
+	.st8{opacity:0.15;fill:url(#SVGID_3_);}
+	.st9{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+	.st10{fill:url(#SVGID_6_);}
+	.st11{display:inline;fill:#FFFFFF;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="Inactive">
+			<g>
+				<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6191)" class="st0 st1 st2">4</text>
+				<polyline class="st3" points="1.2,170.8 1.2,1.2 170.8,1.2 170.8,170.8 				"/>
+			</g>
+		</g>
+		<g id="Active" class="st4">
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+				<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				<stop  offset="1" style="stop-color:#000000"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st5" width="169.5" height="169.5"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#5DFE9F;stop-opacity:0.94"/>
+				<stop  offset="0.6043" style="stop-color:#6BFBFF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st6" width="169.5" height="169.5"/>
+			<g class="st7">
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st8" width="169.5" height="169.5"/>
+				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1" y1="171" x2="171" y2="1">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-1.7107" y1="169.1686" x2="173.7107" y2="2.8314">
+					<stop  offset="0" style="stop-color:#8BC53F"/>
+					<stop  offset="1" style="stop-color:#0DF9FF"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st9" width="170" height="170"/>
+				<g>
+					<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+						<stop  offset="0" style="stop-color:#59FF7F"/>
+						<stop  offset="1" style="stop-color:#6BFBFF"/>
+					</linearGradient>
+					<path class="st10" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+				</g>
+			</g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)" class="st11 st1 st2">3</text>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_5_Active-01.svg b/app/images/HMI_Phone_Button_5_Active-01.svg
index bdab1cb..9511356 100644
--- a/app/images/HMI_Phone_Button_5_Active-01.svg
+++ b/app/images/HMI_Phone_Button_5_Active-01.svg
@@ -1,170 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_5_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-554.2627"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">5</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.8578 111.6188)" class="st1 st2 st3">5</text>
+			<rect x="1.2" y="1.2" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_5_Inactive-01.svg b/app/images/HMI_Phone_Button_5_Inactive-01.svg
index 585ed25..2de5c84 100644
--- a/app/images/HMI_Phone_Button_5_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_5_Inactive-01.svg
@@ -1,134 +1,76 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_5_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-502.88136"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">5</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+	.st4{display:none;}
+	.st5{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+	.st6{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+	.st7{display:inline;}
+	.st8{opacity:0.15;fill:url(#SVGID_3_);}
+	.st9{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+	.st10{fill:url(#SVGID_6_);}
+	.st11{display:inline;fill:#FFFFFF;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="Inactive">
+			<g>
+				<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.8578 111.6188)" class="st0 st1 st2">5</text>
+				<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+			</g>
+		</g>
+		<g id="Active" class="st4">
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+				<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				<stop  offset="1" style="stop-color:#000000"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st5" width="169.5" height="169.5"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#5DFE9F;stop-opacity:0.94"/>
+				<stop  offset="0.6043" style="stop-color:#6BFBFF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st6" width="169.5" height="169.5"/>
+			<g class="st7">
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st8" width="169.5" height="169.5"/>
+				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1" y1="171" x2="171" y2="1">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-1.7107" y1="169.1686" x2="173.7107" y2="2.8314">
+					<stop  offset="0" style="stop-color:#8BC53F"/>
+					<stop  offset="1" style="stop-color:#0DF9FF"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st9" width="170" height="170"/>
+				<g>
+					<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+						<stop  offset="0" style="stop-color:#59FF7F"/>
+						<stop  offset="1" style="stop-color:#6BFBFF"/>
+					</linearGradient>
+					<path class="st10" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+				</g>
+			</g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)" class="st11 st1 st2">5</text>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_6_Active-01.svg b/app/images/HMI_Phone_Button_6_Active-01.svg
index 9ae45d9..1a4d5e5 100644
--- a/app/images/HMI_Phone_Button_6_Active-01.svg
+++ b/app/images/HMI_Phone_Button_6_Active-01.svg
@@ -1,170 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_6_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-562.64406"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">6</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0764 111.6189)" class="st1 st2 st3">6</text>
+			<rect x="1.2" y="1.2" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_6_Inactive-01.svg b/app/images/HMI_Phone_Button_6_Inactive-01.svg
index 7205ce8..ef29cf6 100644
--- a/app/images/HMI_Phone_Button_6_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_6_Inactive-01.svg
@@ -1,134 +1,30 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_6_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-540.41524"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">6</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0764 111.6189)" class="st0 st1 st2">6</text>
+			<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_7_Active-01.svg b/app/images/HMI_Phone_Button_7_Active-01.svg
index 8db028b..5f3bc53 100644
--- a/app/images/HMI_Phone_Button_7_Active-01.svg
+++ b/app/images/HMI_Phone_Button_7_Active-01.svg
@@ -1,170 +1,30 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_7_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-350.92373"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">7</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6201)" class="st0 st1 st2">7</text>
+			<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_7_Inactive-01.svg b/app/images/HMI_Phone_Button_7_Inactive-01.svg
index 9df3155..7dfa6de 100644
--- a/app/images/HMI_Phone_Button_7_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_7_Inactive-01.svg
@@ -1,134 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_7_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-196.41525"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">7</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6201)" class="st1 st2 st3">7</text>
+			<rect x="1.2" y="1.2" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_8_Active-01.svg b/app/images/HMI_Phone_Button_8_Active-01.svg
index 9cd4800..9514ed5 100644
--- a/app/images/HMI_Phone_Button_8_Active-01.svg
+++ b/app/images/HMI_Phone_Button_8_Active-01.svg
@@ -1,170 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_8_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-284.60169"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">8</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.8578 111.6203)" class="st1 st2 st3">8</text>
+			<rect x="1.2" y="1.2" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_8_Inactive-01.svg b/app/images/HMI_Phone_Button_8_Inactive-01.svg
index 2eb2e60..76a1379 100644
--- a/app/images/HMI_Phone_Button_8_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_8_Inactive-01.svg
@@ -1,134 +1,30 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_8_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-301.36441"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">8</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 63.8578 111.6203)" class="st0 st1 st2">8</text>
+			<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_9_Active-01.svg b/app/images/HMI_Phone_Button_9_Active-01.svg
index 51883b1..7901950 100644
--- a/app/images/HMI_Phone_Button_9_Active-01.svg
+++ b/app/images/HMI_Phone_Button_9_Active-01.svg
@@ -1,170 +1,34 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_9_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-266.38136"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st13 st6 st7"
-           id="text88">9</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+			<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+			<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+		</linearGradient>
+		<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+		<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0339 108.9132)" class="st1 st2 st3">9</text>
+		<rect x="1.2" y="1.2" class="st4" width="169.5" height="169.5"/>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_9_Inactive-01.svg b/app/images/HMI_Phone_Button_9_Inactive-01.svg
index c70e475..032c392 100644
--- a/app/images/HMI_Phone_Button_9_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_9_Inactive-01.svg
@@ -1,134 +1,28 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_9_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-206.61864"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
-           class="st3 st4 st5"
-           id="text41">9</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0339 108.9132)" class="st0 st1 st2">9</text>
+		<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_Blank_Active-01.svg b/app/images/HMI_Phone_Button_Blank_Active-01.svg
index 2e4fe6a..f524a6f 100644
--- a/app/images/HMI_Phone_Button_Blank_Active-01.svg
+++ b/app/images/HMI_Phone_Button_Blank_Active-01.svg
@@ -1,165 +1,32 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_Blank_Active-01.svg"><metadata
-     id="metadata92"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs90" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview88"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-293.34746"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g></g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+			<rect x="1.2" y="1.2" class="st1" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_Blank_Inactive-01.svg b/app/images/HMI_Phone_Button_Blank_Inactive-01.svg
index cc001ab..ab31ab9 100644
--- a/app/images/HMI_Phone_Button_Blank_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_Blank_Inactive-01.svg
@@ -1,126 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_Blank_Inactive-01.svg"><metadata
-     id="metadata90"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs88" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview86"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-225.9322"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{display:none;}
-	.st4{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st5{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st6{display:inline;}
-	.st7{opacity:0.15;fill:url(#SVGID_7_);}
-	.st8{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st9{fill:url(#SVGID_10_);}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g></g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_NumberSign_Active-01.svg b/app/images/HMI_Phone_Button_NumberSign_Active-01.svg
index ce48926..b16e639 100644
--- a/app/images/HMI_Phone_Button_NumberSign_Active-01.svg
+++ b/app/images/HMI_Phone_Button_NumberSign_Active-01.svg
@@ -1,49 +1,19 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_#_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-585.23729"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
 	.st0{display:none;}
 	.st1{display:inline;}
 	.st2{opacity:0.15;fill:url(#SVGID_1_);}
@@ -52,119 +22,49 @@
 	.st5{display:inline;fill:#66FF99;}
 	.st6{font-family:'Roboto-Light';}
 	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 61.4761 111.604)"
-           class="st13 st6 st7"
-           id="text88">#</text>
-</g></g></switch></svg>
\ No newline at end of file
+	.st8{opacity:0.35;fill:url(#SVGID_5_);}
+	.st9{fill:#FFFFFF;}
+	.st10{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="Inactive" class="st0">
+			<g class="st1">
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st2" width="169.5" height="169.5"/>
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1" y1="171" x2="171" y2="1">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-1.7107" y1="169.1686" x2="173.7107" y2="2.8314">
+					<stop  offset="0" style="stop-color:#8BC53F"/>
+					<stop  offset="1" style="stop-color:#0DF9FF"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st3" width="170" height="170"/>
+				<g>
+					<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+						<stop  offset="0" style="stop-color:#59FF7F"/>
+						<stop  offset="1" style="stop-color:#6BFBFF"/>
+					</linearGradient>
+					<path class="st4" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+				</g>
+			</g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 61.4761 111.604)" class="st5 st6 st7">#</text>
+		</g>
+		<g id="Active">
+			<g>
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-1.1917" y1="168.219" x2="172.7222" y2="3.3114">
+					<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+					<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st8" width="169.5" height="169.5"/>
+				<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 61.2437 111.3722)" class="st9 st6 st7">#</text>
+				<rect x="1" y="1" class="st10" width="169.5" height="169.5"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg b/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg
index 80e834e..3184ab1 100644
--- a/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg
@@ -1,134 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;#38;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_#_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-429.99999"
-     inkscape:cy="85.999999"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 61.4761 111.604)"
-           class="st3 st4 st5"
-           id="text41">#</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Inactive" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:url(#SVGID_1_);}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 61.4785 111.607)" class="st0 st1 st2">#</text>
+			<g>
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+					<stop  offset="0" style="stop-color:#00ADDC"/>
+					<stop  offset="1" style="stop-color:#6BFBFF"/>
+				</linearGradient>
+				<path class="st3" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_asterisk_Active-01.svg b/app/images/HMI_Phone_Button_asterisk_Active-01.svg
index 4116466..a538d7f 100644
--- a/app/images/HMI_Phone_Button_asterisk_Active-01.svg
+++ b/app/images/HMI_Phone_Button_asterisk_Active-01.svg
@@ -1,170 +1,36 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_asterisk_Active-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-268.5678"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{opacity:0.15;fill:url(#SVGID_1_);}
-	.st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st4{fill:url(#SVGID_4_);}
-	.st5{display:inline;fill:#66FF99;}
-	.st6{font-family:'Roboto-Light';}
-	.st7{font-size:78.8169px;}
-	.st8{opacity:0.15;fill:url(#SVGID_5_);}
-	.st9{opacity:0.35;fill:url(#SVGID_6_);}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Active"><linearGradient
-           id="SVGID_5_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.2348"
-           y1="170.7652"
-           x2="170.7652"
-           y2="1.2348"><stop
-             offset="0"
-             style="stop-color:#FFFFFF;stop-opacity:0"
-             id="stop45" /><stop
-             offset="1"
-             style="stop-color:#000000"
-             id="stop47" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st8"
-           width="169.5"
-           height="169.5"
-           id="rect49" /><linearGradient
-           id="SVGID_6_"
-           gradientUnits="userSpaceOnUse"
-           x1="-0.9569"
-           y1="168.4538"
-           x2="172.9569"
-           y2="3.5462"><stop
-             offset="0.136"
-             style="stop-color:#5DFE9F;stop-opacity:0.94"
-             id="stop52" /><stop
-             offset="0.6043"
-             style="stop-color:#6BFBFF;stop-opacity:0.6"
-             id="stop54" /></linearGradient><rect
-           x="1.2"
-           y="1.2"
-           class="st9"
-           width="169.5"
-           height="169.5"
-           id="rect56" /><g
-           id="g58"><linearGradient
-             id="SVGID_7_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop61" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop63" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st10"
-             width="169.5"
-             height="169.5"
-             id="rect65" /><linearGradient
-             id="SVGID_8_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop68" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop70" /></linearGradient><linearGradient
-             id="SVGID_9_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop73" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop75" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st11"
-             width="170"
-             height="170"
-             id="rect77" /><g
-             id="g79"><linearGradient
-               id="SVGID_10_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop82" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop84" /></linearGradient><path
-               class="st12"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path86" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 69.1924 111.6461)"
-           class="st13 st6 st7"
-           id="text88">*</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Active" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{font-family:'Roboto-Light';}
+	.st3{font-size:78.8169px;}
+	.st4{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#00ADDC;stop-opacity:0.94"/>
+				<stop  offset="0.9332" style="stop-color:#0DF9FF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st0" width="169.5" height="169.5"/>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 69.1922 111.6494)" class="st1 st2 st3">*</text>
+			<rect x="1.2" y="1.2" class="st4" width="169.5" height="169.5"/>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg b/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg
index 51f1812..95a75b2 100644
--- a/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg
+++ b/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg
@@ -1,134 +1,76 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 172 172"
-   style="enable-background:new 0 0 172 172;"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Button_asterisk_Inactive-01.svg"><metadata
-     id="metadata94"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs92" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview90"
-     showgrid="false"
-     inkscape:zoom="1.372093"
-     inkscape:cx="-212.81356"
-     inkscape:cy="86"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><style
-     type="text/css"
-     id="style4">
-	.st0{opacity:0.15;fill:url(#SVGID_1_);}
-	.st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
-	.st2{fill:url(#SVGID_4_);}
-	.st3{fill:#66FF99;}
-	.st4{font-family:'Roboto-Light';}
-	.st5{font-size:78.8169px;}
-	.st6{display:none;}
-	.st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
-	.st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
-	.st9{display:inline;}
-	.st10{opacity:0.15;fill:url(#SVGID_7_);}
-	.st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
-	.st12{fill:url(#SVGID_10_);}
-	.st13{display:inline;fill:#FFFFFF;}
-</style><switch
-     id="switch6"><g
-       i:extraneous="self"
-       id="g8"><g
-         id="Inactive"><g
-           id="g11"><linearGradient
-             id="SVGID_1_"
-             gradientUnits="userSpaceOnUse"
-             x1="1.2348"
-             y1="170.7652"
-             x2="170.7652"
-             y2="1.2348"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop14" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop16" /></linearGradient><rect
-             x="1.2"
-             y="1.2"
-             class="st0"
-             width="169.5"
-             height="169.5"
-             id="rect18" /><linearGradient
-             id="SVGID_2_"
-             gradientUnits="userSpaceOnUse"
-             x1="1"
-             y1="171"
-             x2="171"
-             y2="1"><stop
-               offset="0"
-               style="stop-color:#FFFFFF;stop-opacity:0"
-               id="stop21" /><stop
-               offset="1"
-               style="stop-color:#000000"
-               id="stop23" /></linearGradient><linearGradient
-             id="SVGID_3_"
-             gradientUnits="userSpaceOnUse"
-             x1="-1.7107"
-             y1="169.1686"
-             x2="173.7107"
-             y2="2.8314"><stop
-               offset="0"
-               style="stop-color:#8BC53F"
-               id="stop26" /><stop
-               offset="1"
-               style="stop-color:#0DF9FF"
-               id="stop28" /></linearGradient><rect
-             x="1"
-             y="1"
-             class="st1"
-             width="170"
-             height="170"
-             id="rect30" /><g
-             id="g32"><linearGradient
-               id="SVGID_4_"
-               gradientUnits="userSpaceOnUse"
-               x1="-2.2236"
-               y1="169.6549"
-               x2="174.2236"
-               y2="2.3451"><stop
-                 offset="0"
-                 style="stop-color:#59FF7F"
-                 id="stop35" /><stop
-                 offset="1"
-                 style="stop-color:#6BFBFF"
-                 id="stop37" /></linearGradient><path
-               class="st2"
-               d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
-               id="path39" /></g></g><text
-           transform="matrix(1 5.460000e-03 -5.460000e-03 1 69.1924 111.6461)"
-           class="st3 st4 st5"
-           id="text41">*</text>
-</g></g></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 172 172"
+	 style="enable-background:new 0 0 172 172;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:'Roboto-Light';}
+	.st2{font-size:78.8169px;}
+	.st3{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+	.st4{display:none;}
+	.st5{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+	.st6{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+	.st7{display:inline;}
+	.st8{opacity:0.15;fill:url(#SVGID_3_);}
+	.st9{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+	.st10{fill:url(#SVGID_6_);}
+	.st11{display:inline;fill:#FFFFFF;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="Inactive">
+			<g>
+				<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 69.1922 111.6494)" class="st0 st1 st2">*</text>
+				<rect x="1.2" y="1.2" class="st3" width="169.5" height="169.5"/>
+			</g>
+		</g>
+		<g id="Active" class="st4">
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+				<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				<stop  offset="1" style="stop-color:#000000"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st5" width="169.5" height="169.5"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-0.9569" y1="168.4538" x2="172.9569" y2="3.5462">
+				<stop  offset="0.136" style="stop-color:#5DFE9F;stop-opacity:0.94"/>
+				<stop  offset="0.6043" style="stop-color:#6BFBFF;stop-opacity:0.6"/>
+			</linearGradient>
+			<rect x="1.2" y="1.2" class="st6" width="169.5" height="169.5"/>
+			<g class="st7">
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1.2348" y1="170.7652" x2="170.7652" y2="1.2348">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<rect x="1.2" y="1.2" class="st8" width="169.5" height="169.5"/>
+				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1" y1="171" x2="171" y2="1">
+					<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+					<stop  offset="1" style="stop-color:#000000"/>
+				</linearGradient>
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-1.7107" y1="169.1686" x2="173.7107" y2="2.8314">
+					<stop  offset="0" style="stop-color:#8BC53F"/>
+					<stop  offset="1" style="stop-color:#0DF9FF"/>
+				</linearGradient>
+				<rect x="1" y="1" class="st9" width="170" height="170"/>
+				<g>
+					<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-2.2236" y1="169.6549" x2="174.2236" y2="2.3451">
+						<stop  offset="0" style="stop-color:#59FF7F"/>
+						<stop  offset="1" style="stop-color:#6BFBFF"/>
+					</linearGradient>
+					<path class="st10" d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"/>
+				</g>
+			</g>
+			<text transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)" class="st11 st1 st2">9</text>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Call.svg b/app/images/HMI_Phone_Call.svg
index 2328737..497c2ff 100644
--- a/app/images/HMI_Phone_Call.svg
+++ b/app/images/HMI_Phone_Call.svg
@@ -1,106 +1,44 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 585 109"
-   style="enable-background:new 0 0 585 109;"
-   xml:space="preserve"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Call.svg"><metadata
-     id="metadata37"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs35" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview33"
-     showgrid="false"
-     inkscape:zoom="1.1487179"
-     inkscape:cx="-182.8125"
-     inkscape:cy="54.5"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><style
-     type="text/css"
-     id="style3">
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 585 109"
+	 style="enable-background:new 0 0 585 109;" xml:space="preserve">
+<style type="text/css">
 	.st0{opacity:0.43;fill:url(#SVGID_1_);}
 	.st1{fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;}
 	.st2{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style><switch
-     id="switch5"><g
-       i:extraneous="self"
-       id="g7"><g
-         id="g9"><linearGradient
-           id="SVGID_1_"
-           gradientUnits="userSpaceOnUse"
-           x1="-326.4796"
-           y1="511.2228"
-           x2="922.6905"
-           y2="-410.4949"><stop
-             offset="0"
-             style="stop-color:#59FF7F"
-             id="stop12" /><stop
-             offset="1"
-             style="stop-color:#6BFBFF"
-             id="stop14" /></linearGradient><rect
-           x="1"
-           y="1"
-           class="st0"
-           width="583"
-           height="107"
-           id="rect16" /><linearGradient
-           id="SVGID_2_"
-           gradientUnits="userSpaceOnUse"
-           x1="54.1024"
-           y1="198.5423"
-           x2="530.8976"
-           y2="-89.5423"><stop
-             offset="0"
-             style="stop-color:#59FF7F"
-             id="stop19" /><stop
-             offset="1"
-             style="stop-color:#6BFBFF"
-             id="stop21" /></linearGradient><rect
-           x="1"
-           y="1"
-           class="st1"
-           width="583"
-           height="107"
-           id="rect23" /><g
-           id="g25"><path
-             class="st2"
-             d="M264.4,55c1.3-3.2,3.3-6.9,6.5-10.1c8-8,18.9-9.1,18.9-9.1c-0.5,1.7,0,3.5,1.3,4.9l6.2,6.2      c1.9,1.9,5.1,1.9,7,0l13.2-9.7c1.9-1.9,1.9-5.1,0-7l-8-8c-1.9-1.9-27.9-5.9-48,14.1c-22.6,22.6-15.2,45.2-13.3,47.2l7.6,7.6      c1.9,1.9,5.1,1.9,7,0l10-12.8c1.9-1.9,1.9-5.1,0-7l-6.2-6.2c-1.6-1.6-4.5-1.4-4.5-1.4"
-             id="path27" /><line
-             class="st2"
-             x1="262.2"
-             y1="63.7"
-             x2="256.5"
-             y2="69.4"
-             id="line29" /><line
-             class="st2"
-             x1="295.7"
-             y1="30.3"
-             x2="290"
-             y2="36"
-             id="line31" /></g></g></g></switch></svg>
\ No newline at end of file
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-326.4796" y1="511.2228" x2="922.6905" y2="-410.4949">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="1" y="1" class="st0" width="583" height="107"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="54.1024" y1="198.5423" x2="530.8976" y2="-89.5423">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="1" y="1" class="st1" width="583" height="107"/>
+			<g>
+				<path class="st2" d="M264.4,55c1.3-3.2,3.3-6.9,6.5-10.1c8-8,18.9-9.1,18.9-9.1c-0.5,1.7,0,3.5,1.3,4.9l6.2,6.2
+					c1.9,1.9,5.1,1.9,7,0l13.2-9.7c1.9-1.9,1.9-5.1,0-7l-8-8c-1.9-1.9-27.9-5.9-48,14.1c-22.6,22.6-15.2,45.2-13.3,47.2l7.6,7.6
+					c1.9,1.9,5.1,1.9,7,0l10-12.8c1.9-1.9,1.9-5.1,0-7l-6.2-6.2c-1.6-1.6-4.5-1.4-4.5-1.4"/>
+				<line class="st2" x1="262.2" y1="63.7" x2="256.5" y2="69.4"/>
+				<line class="st2" x1="295.7" y1="30.3" x2="290" y2="36"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/images/HMI_Phone_Contacts-01.svg b/app/images/HMI_Phone_Contacts-01.svg
index 5e66219..3fe8e02 100644
--- a/app/images/HMI_Phone_Contacts-01.svg
+++ b/app/images/HMI_Phone_Contacts-01.svg
@@ -1,88 +1,45 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:i="&amp;ns_ai;"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 105 105"
-   style="enable-background:new 0 0 105 105;"
-   xml:space="preserve"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="HMI_Phone_Contacts-01.svg"><metadata
-     id="metadata31"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs29" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2560"
-     inkscape:window-height="1464"
-     id="namedview27"
-     showgrid="false"
-     inkscape:zoom="2.247619"
-     inkscape:cx="-136.58898"
-     inkscape:cy="52.5"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><style
-     type="text/css"
-     id="style3">
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 105 105"
+	 style="enable-background:new 0 0 105 105;" xml:space="preserve">
+<style type="text/css">
 	.st0{opacity:0.8;fill:#1B1A1D;}
 	.st1{fill:url(#SVGID_1_);}
 	.st2{fill:url(#SVGID_2_);}
-</style><switch
-     id="switch5"><g
-       i:extraneous="self"
-       id="g7"><g
-         id="g9"><rect
-           class="st0"
-           width="105"
-           height="105"
-           id="rect11" /><linearGradient
-           id="SVGID_1_"
-           gradientUnits="userSpaceOnUse"
-           x1="25.8899"
-           y1="61.9762"
-           x2="91.819"
-           y2="17.6801"><stop
-             offset="0"
-             style="stop-color:#59FF7F"
-             id="stop14" /><stop
-             offset="1"
-             style="stop-color:#6BFBFF"
-             id="stop16" /></linearGradient><path
-           class="st1"
-           d="M52,58.8C52,58.8,52,58.8,52,58.8c5.6,0,12.3-7,12.3-15.6v0c0-6.8-5.5-12.3-12.3-12.3c0,0,0,0,0,0     c-6.8,0-12.3,5.5-12.3,12.3C39.7,51.8,46.4,58.8,52,58.8z M52,34.9C52,34.9,52,34.9,52,34.9c4.6,0,8.3,3.7,8.3,8.3     c0,4.9-4.1,11.5-8.3,11.6c0,0,0,0,0,0c-4.2,0-8.3-6.6-8.3-11.5C43.7,38.7,47.4,34.9,52,34.9z"
-           id="path18" /><linearGradient
-           id="SVGID_2_"
-           gradientUnits="userSpaceOnUse"
-           x1="1.4091"
-           y1="71.7406"
-           x2="96.8002"
-           y2="37.5399"><stop
-             offset="0"
-             style="stop-color:#59FF7F"
-             id="stop21" /><stop
-             offset="1"
-             style="stop-color:#6BFBFF"
-             id="stop23" /></linearGradient><path
-           class="st2"
-           d="M52.5,15.7c-20.8,0-37.7,16.9-37.7,37.7c0,15.1,8.9,28.2,21.8,34.2c1.3,0.6,2.6,1.1,3.9,1.6     c3.8,1.3,7.8,2,12,2c4.1,0,8.1-0.7,11.8-1.9c1.3-0.4,2.6-1,3.9-1.5c13-6,22-19.1,22-34.3C90.2,32.6,73.3,15.7,52.5,15.7z      M52.5,90.1c-4.2,0-8.2-0.7-11.9-2l1.4-20.6c1.2-1,4.6-3.2,10.5-3.2c0,0,0,0,0,0c5.9,0,9.3,2.2,10.4,3.2l1.4,20.7     C60.6,89.5,56.6,90.1,52.5,90.1z M68.2,86.6l-1.4-20.2c0-0.5-0.2-0.9-0.5-1.2c-0.2-0.2-4.7-4.9-13.9-4.9c0,0,0,0,0,0     c-9.2,0-13.7,4.7-13.9,4.9C38.2,65.5,38,66,38,66.4l-1.3,20.1C24.3,80.6,15.8,68,15.8,53.4c0-20.2,16.5-36.7,36.7-36.7     c20.2,0,36.7,16.5,36.7,36.7C89.2,68.1,80.6,80.7,68.2,86.6z"
-           id="path25" /></g></g></switch></svg>
\ No newline at end of file
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<rect y="-0.1" class="st0" width="105" height="105"/>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="4.6329" y1="101.6682" x2="99.3335" y2="-13.7581">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<path class="st1" d="M52,58.6C52,58.6,52,58.6,52,58.6c5.6,0,12.3-7,12.3-15.6v0c0-6.8-5.5-12.3-12.3-12.3c0,0,0,0,0,0
+				c-6.8,0-12.3,5.5-12.3,12.3C39.7,51.7,46.4,58.6,52,58.6z M52,34.8C52,34.8,52,34.8,52,34.8c4.6,0,8.3,3.7,8.3,8.3
+				c0,4.9-4.1,11.5-8.3,11.6c0,0,0,0,0,0c-4.2,0-8.3-6.6-8.3-11.5C43.7,38.5,47.4,34.8,52,34.8z"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="9.5268" y1="105.6833" x2="104.2274" y2="-9.743">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<path class="st2" d="M52.5,15.6c-20.8,0-37.7,16.9-37.7,37.7c0,15.1,8.9,28.2,21.8,34.2c1.3,0.6,2.6,1.1,3.9,1.6
+				c3.8,1.3,7.8,2,12,2c4.1,0,8.1-0.7,11.8-1.9c1.3-0.4,2.6-1,3.9-1.5c13-6,22-19.1,22-34.3C90.2,32.5,73.3,15.6,52.5,15.6z
+				 M52.5,90c-4.2,0-8.2-0.7-11.9-2l1.4-20.6c1.2-1,4.6-3.2,10.5-3.2c0,0,0,0,0,0c5.9,0,9.3,2.2,10.4,3.2l1.4,20.7
+				C60.6,89.3,56.6,90,52.5,90z M68.2,86.5l-1.4-20.2c0-0.5-0.2-0.9-0.5-1.2c-0.2-0.2-4.7-4.9-13.9-4.9c0,0,0,0,0,0
+				c-9.2,0-13.7,4.7-13.9,4.9c-0.3,0.3-0.5,0.8-0.5,1.2l-1.3,20.1c-12.3-5.9-20.9-18.5-20.9-33.1c0-20.2,16.5-36.7,36.7-36.7
+				c20.2,0,36.7,16.5,36.7,36.7C89.2,68,80.6,80.6,68.2,86.5z"/>
+		</g>
+	</g>
+</switch>
+</svg>
-- 
cgit 1.2.3-korg