diff --git a/htdocs/takepos/css/phone.css b/htdocs/takepos/css/phone.css
index 0f3606071f0..37434cfc707 100644
--- a/htdocs/takepos/css/phone.css
+++ b/htdocs/takepos/css/phone.css
@@ -4,6 +4,7 @@ html,body {
     margin:0;
     height:100%;
 	width:100%;
+	background-color: #FFF !important;
 }
 
 .container{
@@ -17,14 +18,14 @@ html,body {
 .phonerow1{
 	margin: 0 auto;
 	width: 100%;
-	height: 40%;
+	height: auto;
 	min-height: 40%;
 }
 
 .phonerow2{
 	margin: 0 auto;
 	width: 100%;
-	height: 40%;
+	height: auto;
 }
 
 .phonebuttonsrow{
@@ -90,7 +91,71 @@ button.publicphonebutton {
 	text-align: center;
 	overflow: visible; /* removes extra width in IE */
 	width:33%;
-	height:90%;
+	height:50px;
+	font-weight: bold;
+	color: #fff;
+}
+
+.phoneblue{
+	color: #fff;
+	background-color: #428bca;
+	border-color: #357ebd;
+}
+
+.phonegreen{
+	color: #fff;
+	background-color: #5cb85c;
+	border-color: #4cae4c;
+	font-size:20px;
+	text-align:center;
+	width:20px;
+}
+
+.phonetable{
+	width:130px;
+}
+
+.phoneqty{
+	font-size:24px;
+	font-weight: bold;
+	
+	
+}
+
+.phonered{
+	color: #fff;
+	background-color: #dc3545;
+	border-color: #dc3545;
+	font-size:20px;
+	text-align:center;
+	width:20px;
+}
+
+.phoneorange{
+	color: #fff;
+	background-color: #f0ad4e;
+	border-color: #eea236;
+}
+
+.total{
+	width:100% !important;
+	font-size:24px;
+}
+
+.width24{
+		font-size:24px;
+}
+
+.leftcat{
+	margin-top:15px;
+	float:left;
+	width: 50%;
+	text-align:center;
+	height:150px;;
+	overflow:hidden;
+	margin-bottom:5px;
+	font-size:18px;
+	color:#5B5858;
 	font-weight: bold;
 }
 
@@ -107,3 +172,28 @@ button.publicphonebutton2 {
 	font-weight: bold;
 	padding: 8px 16px;
 }
+
+.div-table-responsive-no-min{
+	margin-top:20px;
+}
+
+.comment {
+    float: left;
+    width: 100%;
+    height: auto;
+}
+
+.comment-text-area {
+    float: left;
+    width: 80%;
+    height: auto;
+}
+
+.textinput {
+    float: left;
+    width: 100%;
+    min-height: 75px;
+    outline: none;
+    resize: none;
+    border: 1px solid grey;
+}
\ No newline at end of file
diff --git a/htdocs/takepos/genimg/index.php b/htdocs/takepos/genimg/index.php
index e668b01aacb..fbb388b9aec 100644
--- a/htdocs/takepos/genimg/index.php
+++ b/htdocs/takepos/genimg/index.php
@@ -77,7 +77,10 @@ elseif ($query == "pro")
 	preg_match('@src="([^"]+)"@', $image, $match);
 	$file = array_pop($match);
 	if ($file == "") header('Location: ../../public/theme/common/nophoto.png');
-	else header('Location: '.$file.'&cache=1&publictakepos=1&modulepart=product');
+	else{
+		if (!defined('INCLUDE_PHONEPAGE_FROM_PUBLIC_PAGE')) header('Location: '.$file.'&cache=1');
+		else header('Location: '.$file.'&cache=1&publictakepos=1&modulepart=product');
+	}
 }
 else
 {
diff --git a/htdocs/takepos/invoice.php b/htdocs/takepos/invoice.php
index 16012022dc9..3b486b7a3bc 100644
--- a/htdocs/takepos/invoice.php
+++ b/htdocs/takepos/invoice.php
@@ -70,10 +70,12 @@ if (($conf->global->TAKEPOS_PHONE_BASIC_LAYOUT == 1 && $conf->browser->layout ==
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>';
+	$arrayofcss = array(
+	'/takepos/css/pos.css.php',
+	'/takepos/js/jquery.colorbox-min.js'
+	);
+	$arrayofjs = array('/takepos/js/jquery.colorbox-min.js');
 	top_htmlhead($head, $title, $disablejs, $disablehead, $arrayofjs, $arrayofcss);
-	print '<link rel="stylesheet" href="css/pos.css.php">
-	<link rel="stylesheet" href="css/colorbox.css" type="text/css" media="screen" />
-	<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>';
 }
 
 /**
@@ -877,6 +879,7 @@ if ($_SESSION["basiclayout"] != 1)
 	print '<td class="linecolqty right">'.$langs->trans('Qty').'</td>';
 	print '<td class="linecolht right nowraponall">'.$langs->trans('TotalTTCShort').'</td>';
 }
+else print '<td class="linecolqty right">'.$langs->trans('Qty').'</td>';
 print "</tr>\n";
 
 
@@ -889,12 +892,11 @@ if ($_SESSION["basiclayout"] == 1)
         $categories = $categorie->get_full_arbo('product');
 		$htmlforlines = '';
         foreach ($categories as $row) {
-			$htmlforlines .= '<tr class="drag drop oddeven posinvoiceline';
+			$htmlforlines .= '<div class="leftcat';
 			$htmlforlines .= '" onclick="LoadProducts('.$row['id'].');">';
-			$htmlforlines .= '<td class="left">';
+			$htmlforlines .= '<img class="imgwrapper" width="33%" src="'.DOL_URL_ROOT.'/takepos/public/auto_order.php?genimg=cat&query=cat&id='.$row['id'].'"><br>';
 			$htmlforlines .= $row['label'];
-			$htmlforlines .= '</td>';
-			$htmlforlines .= '</tr>'."\n";
+			$htmlforlines .= '</div>'."\n";
 		}
 		$htmlforlines .= '</table>';
 		$htmlforlines .= '</table>';
@@ -910,12 +912,11 @@ if ($_SESSION["basiclayout"] == 1)
 		$prods = $object->getObjectsInCateg("product");
 		$htmlforlines = '';
 		foreach ($prods as $row) {
-			$htmlforlines .= '<tr class="drag drop oddeven posinvoiceline';
+			$htmlforlines .= '<div class="leftcat';
 			$htmlforlines .= '" onclick="AddProduct(\''.$place.'\', '.$row->id.')">';
-			$htmlforlines .= '<td class="left">';
-			$htmlforlines .= $row->label;
-			$htmlforlines .= '<div class="right">'.price($row->price_ttc, 1, $langs, 1, -1, -1, $conf->currency).'</div>';
-			$htmlforlines .= '</tr>'."\n";
+			$htmlforlines .= '<img class="imgwrapper" width="33%" src="'.DOL_URL_ROOT.'/takepos/public/auto_order.php?genimg=pro&query=pro&id='.$row->id.'"><br>';
+			$htmlforlines .= $row->label.''.price($row->price_ttc, 1, $langs, 1, -1, -1, $conf->currency);
+			$htmlforlines .= '</div>'."\n";
 		}
 		$htmlforlines .= '</table>';
 		print $htmlforlines;
@@ -991,7 +992,7 @@ if ($placeid > 0)
             }
             $htmlforlines .= '" id="'.$line->id.'">';
             $htmlforlines .= '<td class="left">';
-			if ($_SESSION["basiclayout"] == 1) $htmlforlines .= $line->qty." x ";
+			if ($_SESSION["basiclayout"] == 1) $htmlforlines .= '<span class="phoneqty">'.$line->qty."</span> x ";
             //if ($line->product_label) $htmlforlines.= '<b>'.$line->product_label.'</b>';
             if (isset($line->product_type))
             {
@@ -1026,7 +1027,8 @@ if ($placeid > 0)
 	            }
             }
             if (!empty($line->array_options['options_order_notes'])) $htmlforlines .= "<br>(".$line->array_options['options_order_notes'].")";
-            if ($_SESSION["basiclayout"] != 1)
+            if ($_SESSION["basiclayout"] == 1) $htmlforlines .= '</td><td class="right phonetable"><button type="button" onclick="SetQty(place, '.$line->rowid.', '.($line->qty-1).');" class="publicphonebutton2 phonered">-</button>&nbsp;&nbsp;<button type="button" onclick="SetQty(place, '.$line->rowid.', '.($line->qty+1).');" class="publicphonebutton2 phonegreen">+</button>';
+			if ($_SESSION["basiclayout"] != 1)
 			{
 				$moreinfo = '';
 				$moreinfo .= $langs->transcountry("TotalHT", $mysoc->country_code).': '.price($line->total_ht);
diff --git a/htdocs/takepos/phone.php b/htdocs/takepos/phone.php
index 90f0aa363dc..32074b43d74 100644
--- a/htdocs/takepos/phone.php
+++ b/htdocs/takepos/phone.php
@@ -62,26 +62,34 @@ if (empty($user->rights->takepos->run) && !defined('INCLUDE_PHONEPAGE_FROM_PUBLI
  * View
  */
 
-// Title
-$title = 'TakePOS - Dolibarr '.DOL_VERSION;
-if (!empty($conf->global->MAIN_APPLICATION_TITLE)) $title = 'TakePOS - '.$conf->global->MAIN_APPLICATION_TITLE;
-$head = '<meta name="apple-mobile-web-app-title" content="TakePOS"/>
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="mobile-web-app-capable" content="yes">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>';
-top_htmlhead($head, $title, $disablejs, $disablehead, $arrayofjs, $arrayofcss);
-
-print '<link rel="stylesheet" href="'.DOL_URL_ROOT.'/takepos/css/phone.css">';
-
 if ($action == "productinfo") {
 	$prod = new Product($db);
     $prod->fetch($idproduct);
-	print "<b>".$prod->label."</b><br>";
+	print '<button type="button" class="publicphonebutton2 phoneblue total" onclick="AddProductConfirm(place, '.$idproduct.');">'.$langs->trans('Add').'</button>';
+	print "<br><b>".$prod->label."</b><br>";
 	print '<img class="imgwrapper" width="60%" src="'.DOL_URL_ROOT.'/takepos/public/auto_order.php?genimg=pro&query=pro&id='.$idproduct.'">';
 	print "<br>".$prod->description;
 	print "<br><b>".price($prod->price_ttc, 1, $langs, 1, -1, -1, $conf->currency)."</b>";
 	print '<br>';
-	print '<button type="button" class="publicphonebutton2" onclick="AddProductConfirm(place, '.$idproduct.');">'.$langs->trans('Add').'</button>';
+}
+elseif ($action == "publicpreorder") {
+	print '<button type="button" class="publicphonebutton2 phoneblue total" onclick="TakeposPrintingOrder();">'.$langs->trans('Confirm').'</button>';
+	print "<br><br>";
+	print 	'<div class="comment">
+            <textarea class="textinput" placeholder="'.$langs->trans('Note').'"></textarea>
+			</div>';
+	print '<br>';
+}
+elseif ($action == "publicpayment") {
+	$langs->loadLangs(array("orders"));
+	print '<h1>'.$langs->trans('StatusOrderDelivered').'</h1>';
+	print '<button type="button" class="publicphonebutton2 phoneblue total" onclick="CheckPlease();">'.$langs->trans('Payment').'</button>';
+	print '<br>';
+}
+elseif ($action == "checkplease") {
+	print '<button type="button" class="publicphonebutton2 phoneblue total" onclick="CheckPlease();">'.$langs->trans('Cash').'</button>';
+	print '<button type="button" class="publicphonebutton2 phoneblue total" onclick="CheckPlease();">'.$langs->trans('CreditCard').'</button>';
+	print '<br>';
 }
 elseif ($action == "editline") {
 	$placeid = GETPOST('placeid', 'int');
@@ -99,13 +107,22 @@ elseif ($action == "editline") {
 			print "<br>".$prod->description;
 			print "<br><b>".price($prod->price_ttc, 1, $langs, 1, -1, -1, $conf->currency)."</b>";
 			print '<br>';
-			print '<button type="button" class="publicphonebutton2" onclick="SetQty(place, '.$selectedline.', '.($line->qty - 1).');">-</button>';
-			print '<button type="button" class="publicphonebutton2" onclick="SetQty(place, '.$selectedline.', '.($line->qty + 1).');">+</button>';
-			print '<button type="button" class="publicphonebutton2" onclick="SetNote(place, '.$selectedline.');">'.$langs->trans('Note').'</button>';
+			print '<button type="button" class="publicphonebutton2 phonered width24" onclick="SetQty(place, '.$selectedline.', '.($line->qty - 1).');">-</button>';
+			print '<button type="button" class="publicphonebutton2 phonegreen width24" onclick="SetQty(place, '.$selectedline.', '.($line->qty + 1).');">+</button>';
+			print '<button type="button" class="publicphonebutton2 phoneblue width24" onclick="SetNote(place, '.$selectedline.');">'.$langs->trans('Note').'</button>';
         }
     }
 }
 else {
+	// Title
+	$title = 'TakePOS - Dolibarr '.DOL_VERSION;
+	if (!empty($conf->global->MAIN_APPLICATION_TITLE)) $title = 'TakePOS - '.$conf->global->MAIN_APPLICATION_TITLE;
+	$head = '<meta name="apple-mobile-web-app-title" content="TakePOS"/>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>';
+	$arrayofcss = array('/takepos/css/phone.css');
+	top_htmlhead($head, $title, $disablejs, $disablehead, $arrayofjs, $arrayofcss);
 	?>
 <script language="javascript">
 	<?php
@@ -194,6 +211,11 @@ function AddProduct(placeid, productid){
 	?>
 }
 
+function PublicPreOrder(){
+	$("#phonediv1").load("auto_order.php?action=publicpreorder&place="+place, function() {
+	});
+}
+
 function AddProductConfirm(placeid, productid){
 	place=placeid;
 	<?php
@@ -221,7 +243,7 @@ function SetQty(place, selectedline, qty){
 }
 
 function SetNote(place, selectedline){
-	var note = prompt("<?php $langs->trans('Note'); ?>", "Harry Potter");
+	var note = prompt("<?php $langs->trans('Note'); ?>", "");
 	$("#phonediv2").load("auto_order.php?mobilepage=invoice&action=updateqty&place="+place+"&idline="+selectedline+"&number="+qty, function() {
     });
 	LoadCats();
@@ -263,7 +285,9 @@ function TakeposPrintingOrder(){
     console.log("TakeposPrintingOrder");
 	<?php
 	if (defined('INCLUDE_PHONEPAGE_FROM_PUBLIC_PAGE')) {
-		echo '$("#phonediv2").load("auto_order.php?action=order&place="+place, function() {
+		echo '$("#phonediv2").load("auto_order.php?action=order&mobilepage=order&place="+place, function() {
+		});';
+		echo '$("#phonediv1").load("auto_order.php?action=publicpayment&place="+place, function() {
 		});';
 	}
 	else {
@@ -278,6 +302,8 @@ function Exit(){
 }
 
 function CheckPlease(){
+	$("#phonediv1").load("auto_order.php?action=checkplease&place="+place, function() {
+	});
 	console.log("Request the check to the waiter");
 	$.ajax({
 		type: "GET",
@@ -287,7 +313,7 @@ function CheckPlease(){
 
 </script>
 
-<body style="overflow: hidden; background-color:#D1D1D1;">
+<body style="background-color:#D1D1D1;">
 	<?php
 	if ($conf->global->TAKEPOS_NUM_TERMINALS != "1" && $_SESSION["takeposterminal"] == "") print '<div class="dialog-info-takepos-terminal" id="dialog-info" title="TakePOS">'.$langs->trans('TerminalSelect').'</div>';
 	?>
@@ -301,18 +327,18 @@ function CheckPlease(){
 			print '<button type="button" class="phonebutton" onclick="Exit();">'.strtoupper(substr($langs->trans('Logout'), 0, 3)).'</button>';
 		}
 		else {
-			print '<button type="button" class="publicphonebutton" onclick="LoadCats();">'.strtoupper(substr($langs->trans('Categories'), 0, 5)).'</button>';
-			print '<button type="button" class="publicphonebutton" onclick="TakeposPrintingOrder();">'.strtoupper(substr($langs->trans('Order'), 0, 5)).'</button>';
-			print '<button type="button" class="publicphonebutton" onclick="CheckPlease();">'.strtoupper(substr($langs->trans('Payment'), 0, 5)).'</button>';
+			print '<button type="button" class="publicphonebutton phoneblue" onclick="LoadCats();">'.strtoupper(substr($langs->trans('Categories'), 0, 5)).'</button>';
+			print '<button type="button" class="publicphonebutton phoneorange" onclick="PublicPreOrder();">'.strtoupper(substr($langs->trans('Order'), 0, 5)).'</button>';
+			print '<button type="button" class="publicphonebutton phonegreen" onclick="CheckPlease();">'.strtoupper(substr($langs->trans('Payment'), 0, 5)).'</button>';
 		}
 		?>
 	</div>
-	<div class="row1">
-		<div id="phonediv1" class="phonediv1"></div>
-	</div>
-	<div class="row2">
+	<div class="phonerow2">
 		<div id="phonediv2" class="phonediv2"></div>
 	</div>
+	<div class="phonerow1">
+		<div id="phonediv1" class="phonediv1"></div>
+	</div>
 </div>
 </body>
 	<?php