diff --git a/smileybutton/smileybutton.php b/smileybutton/smileybutton.php
index 4d0a8d42..6530417b 100644
--- a/smileybutton/smileybutton.php
+++ b/smileybutton/smileybutton.php
@@ -2,7 +2,7 @@
 /**
  * Name: Smileybutton
  * Description: Adds a smileybutton to the Inputbox
- * Version: 1.0
+ * Version: 1.1
  * Author: Johannes Schwab <https://friendica.jschwab.org/profile/ddorian>
  * Maintainer: Hypolite Petovan <https://friendica.mrpetovan.com/profile/hypolite>
  */
@@ -18,14 +18,9 @@ function smileybutton_install()
 
 function smileybutton_jot_tool(string &$body)
 {
-	// Disable if theme is quattro
-	if (DI::appHelper()->getCurrentTheme() == 'quattro') {
-		return;
-	}
-
-	// Disable for mobile because they have a smiley key of their own
+	// this plugin may have smilies mobile devices do not have, disable for mobile by uncommenting return below
 	if (DI::mode()->isMobile() || DI::mode()->isMobile()) {
-		return;
+//		return;
 	}
 
 	$texts = [
@@ -85,12 +80,12 @@ function smileybutton_jot_tool(string &$body)
 	Hook::callAll('smilie', $params);
 
 	//Generate html for smiley list
-	$s = '<table class="smiley-preview"><tr>';
+	$s = '<div class="smiley-preview">';
 	for ($x = 0; $x < count($params['texts']); $x++) {
 		$icon = $params['icons'][$x];
-		$s .= '<td onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</td>';
+		$s .= '<span onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</span>';
 		if (($x + 1) % (floor(sqrt(count($params['texts']))) + 1) == 0) {
-			$s .= '</tr><tr>';
+			$s .= '</div>';
 		}
 	}
 	$s .= '</tr></table>';
@@ -112,7 +107,7 @@ function smileybutton_jot_tool(string &$body)
 	$image_url = DI::baseUrl() . '/' . $image;
 
 	//Add the hmtl and script to the page
-	$body = <<< EOT
+	$body .= <<< EOT
 	<div id="profile-smiley-wrapper">
 		<button type="button" class="btn btn-link smiley_button" onclick="toggle_smileybutton()"><img src="$image_url" alt="smiley"></button>
 		<div id="smileybutton">
diff --git a/smileybutton/view/default.css b/smileybutton/view/default.css
index 5fd60928..97ef8468 100644
--- a/smileybutton/view/default.css
+++ b/smileybutton/view/default.css
@@ -1,3 +1,14 @@
+/* fix positioning if more than one jot tool */
+.jotplugins > div,
+#profile-jot-plugin-wrapper > div {
+	float: left;
+}
+	.jotplugins::after,
+	#profile-jot-plugin-wrapper::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
 #profile-smiley-wrapper {
 	display: block;
 }
@@ -11,15 +22,36 @@
 	width: 18px;
 }
 
-table.smiley-preview img.smiley {
+div.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
-}
-
-table.smiley-preview {
-	border: 1px solid #AAAAAA;
-}
-
-table.smiley-preview td {
 	cursor: pointer;
+	vertical-align: baseline;
 }
+
+div.smiley-preview {
+	border: 1px solid #AAAAAA;
+	max-height: 200px;
+	overflow: auto;
+}
+
+div.smiley-preview > span {
+	cursor: pointer;
+	font-size: 24px;
+	padding: 5px;
+	text-align: center;
+	width: 45px;
+	height: 45px;
+	line-height: 45px;
+	float: left;
+	display: block;
+}
+	div.smiley-preview > span:hover,
+	div.smiley-preview > span:focus {
+		background-color: rgba(0,0,0,.1);
+	}
+	div.smiley-preview::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
diff --git a/smileybutton/view/duepuntozero.css b/smileybutton/view/duepuntozero.css
index 92ff4eba..1ad73d24 100644
--- a/smileybutton/view/duepuntozero.css
+++ b/smileybutton/view/duepuntozero.css
@@ -1,3 +1,15 @@
+/* fix positioning if more than one jot tool */
+.jotplugins > div,
+#profile-jot-plugin-wrapper > div {
+	float: left;
+}
+	.jotplugins::after,
+	#profile-jot-plugin-wrapper::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+
 #profile-smiley-wrapper {
 	display: block;
 }
@@ -17,21 +29,41 @@
 	background: none;
 }
 
-table.smiley-preview img.smiley {
+div.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
 	cursor: pointer;
+	vertical-align: baseline;
 }
 
-table.smiley-preview {
+div.smiley-preview {
 	border: 1px solid #AAAAAA;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
 	position: relative;
-	left: 285px;
+	left: auto;
 	top: -36px;
+	max-height: 200px;
+	overflow: auto;
 }
 
-table.smiley-preview td {
+div.smiley-preview > span {
 	cursor: pointer;
+	font-size: 24px;
+	padding: 5px;
+	text-align: center;
+	width: 45px;
+	height: 45px;
+	line-height: 45px;
+	float: left;
+	display: block;
 }
+	div.smiley-preview > span:hover,
+	div.smiley-preview > span:focus {
+		background-color: rgba(0,0,0,.1);
+	}
+	div.smiley-preview::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
diff --git a/smileybutton/view/frio.css b/smileybutton/view/frio.css
index dce84826..7c1596bf 100644
--- a/smileybutton/view/frio.css
+++ b/smileybutton/view/frio.css
@@ -1,29 +1,80 @@
+/* fix positioning if more than one jot tool */
+.jotplugins > div,
+#profile-jot-plugin-wrapper > div {
+	float: left;
+}
+	.jotplugins::after,
+	#profile-jot-plugin-wrapper::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+
 #profile-smiley-wrapper {
 	display: block;
 }
 
 #smileybutton {
 	display: none;
+	position: fixed;
+	background-color: #FFF;
+	width: auto;
+	border-radius: 8px;
+	padding: 10px;
+	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+	box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+.jotplugins #smileybutton {
+	position: absolute;
+}
+/* image does not work with Frio schemes use icon font */
+.smiley_button {
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
 }
-
 .smiley_button > img {
-	height: 14px;
-	width: 14px;
+	display: none;
 }
+	.smiley_button::before {
+		content: '\f055';
+		font-family: ForkAwesome;
+		font-size: inherit;
+		color: inherit;
+	}
 
-table.smiley-preview img.smiley {
+div.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
-}
-
-table.smiley-preview {
-	border: 1px solid #AAAAAA;
-}
-
-table.smiley-preview td {
 	cursor: pointer;
+	vertical-align: baseline;
 }
 
+div.smiley-preview {
+	border: none;
+	max-height: 200px;
+	overflow: auto;
+}
+
+div.smiley-preview > span {
+	cursor: pointer;
+	font-size: 24px;
+	padding: 5px;
+	text-align: center;
+	width: 45px;
+	height: 45px;
+	line-height: 45px;
+	float: left;
+	display: block;
+}
+	div.smiley-preview > span:hover,
+	div.smiley-preview > span:focus {
+		background-color: rgba(0,0,0,.1);
+	}
+	div.smiley-preview::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
 #profile-smiley-wrapper > .btn-link {
 	position: relative;
 	display: block;
diff --git a/smileybutton/view/quattro.css b/smileybutton/view/quattro.css
new file mode 100644
index 00000000..c48ef2c6
--- /dev/null
+++ b/smileybutton/view/quattro.css
@@ -0,0 +1,64 @@
+/* fix positioning if more than one jot tool */
+.jotplugins > div,
+#profile-jot-plugin-wrapper > div {
+	float: left;
+}
+	.jotplugins::after,
+	#profile-jot-plugin-wrapper::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+#profile-smiley-wrapper {
+	display: block;
+	margin-bottom: -100px;
+}
+
+#smileybutton {
+	display: none;
+	position: absolute;
+	max-width: 770px;
+	z-index: 99;
+	background-color: white;
+}
+.smiley_button {
+	height: 42px;
+}
+.smiley_button > img {
+	height: 18px;
+	width: 18px;
+}
+
+div.smiley-preview img.smiley {
+	max-height: 25px;
+	max-width: 25px;
+	cursor: pointer;
+	vertical-align: baseline;
+}
+
+div.smiley-preview {
+	border: 1px solid #AAAAAA;
+	max-height: 200px;
+	overflow: auto;
+}
+
+div.smiley-preview > span {
+	cursor: pointer;
+	font-size: 24px;
+	padding: 5px;
+	text-align: center;
+	width: 45px;
+	height: 45px;
+	line-height: 45px;
+	float: left;
+	display: block;
+}
+	div.smiley-preview > span:hover,
+	div.smiley-preview > span:focus {
+		background-color: rgba(0,0,0,.1);
+	}
+	div.smiley-preview::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
diff --git a/smileybutton/view/smoothly.css b/smileybutton/view/smoothly.css
index 2f30799f..13dad74e 100644
--- a/smileybutton/view/smoothly.css
+++ b/smileybutton/view/smoothly.css
@@ -1,34 +1,80 @@
+/* fix positioning if more than one jot tool */
+#profile-jot-plugin-wrapper {
+	width: 100%;
+	margin-top: 10px;
+}
+.jotplugins > div,
+#profile-jot-plugin-wrapper > div {
+	float: left;
+}
+	.jotplugins::after,
+	#profile-jot-plugin-wrapper::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+
 #profile-smiley-wrapper {
 	display: block;
 }
 
 #smileybutton {
 	display: none;
+	position: absolute;
+	background-color: #FFF;
+	width: auto;
+	border-radius: 8px;
+	padding: 10px;
+	z-index: 99;
+	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.7);
+	box-shadow: 0 0 5px rgba(0,0,0,.7);
 }
-
+	.jotplugins #smileybutton {
+		position: absolute;
+	}
 .smiley_button > img {
 	height: 22px;
 	width: 22px;
 	position: relative;
-	left: -330px;
+	left: 0px;
 	margin: 4px;
 	-moz-border-radius: 0px;
 	border-radius: 0px;
 }
 
-table.smiley-preview img.smiley {
+div.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
 	cursor: pointer;
+	vertical-align: baseline;
 }
 
-table.smiley-preview {
-	border: 1px solid #AAAAAA;
+div.smiley-preview {
+	border: none;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
 	margin: 5px;
+	max-height: 200px;
+	overflow: auto;
 }
 
-table.smiley-preview td {
+div.smiley-preview > span {
 	cursor: pointer;
+	font-size: 24px;
+	padding: 5px;
+	text-align: center;
+	width: 45px;
+	height: 45px;
+	line-height: 45px;
+	float: left;
+	display: block;
 }
+	div.smiley-preview > span:hover,
+	div.smiley-preview > span:focus {
+		background-color: rgba(0,0,0,.1);
+	}
+	div.smiley-preview::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
diff --git a/smileybutton/view/vier.css b/smileybutton/view/vier.css
index 5862759b..41ed7e5c 100644
--- a/smileybutton/view/vier.css
+++ b/smileybutton/view/vier.css
@@ -1,3 +1,15 @@
+/* fix positioning if more than one jot tool */
+.jotplugins > div,
+#profile-jot-plugin-wrapper > div {
+	float: left;
+}
+	.jotplugins::after,
+	#profile-jot-plugin-wrapper::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+
 #profile-smiley-wrapper {
 	float: left;
 	margin-left: 15px;
@@ -33,17 +45,37 @@
 	margin-right: 18px;
 }
 
-table.smiley-preview {
+div.smiley-preview {
 	background-color: #FFF;
 	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+	max-height: 200px;
+	overflow: auto;
 }
 
-table.smiley-preview img.smiley {
+div.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
 	cursor: pointer;
+	vertical-align: baseline;
 }
 
-table.smiley-preview td {
+div.smiley-preview > span {
 	cursor: pointer;
+	font-size: 24px;
+	padding: 5px;
+	text-align: center;
+	width: 45px;
+	height: 45px;
+	line-height: 45px;
+	float: left;
+	display: block;
 }
+	div.smiley-preview > span:hover,
+	div.smiley-preview > span:focus {
+		background-color: rgba(0,0,0,.1);
+	}
+	div.smiley-preview::after {
+		content: '';
+		display: block;
+		clear: both;
+	}