diff --git a/smileybutton/smileybutton.php b/smileybutton/smileybutton.php
index 6530417b..4d0a8d42 100644
--- a/smileybutton/smileybutton.php
+++ b/smileybutton/smileybutton.php
@@ -2,7 +2,7 @@
 /**
  * Name: Smileybutton
  * Description: Adds a smileybutton to the Inputbox
- * Version: 1.1
+ * Version: 1.0
  * Author: Johannes Schwab <https://friendica.jschwab.org/profile/ddorian>
  * Maintainer: Hypolite Petovan <https://friendica.mrpetovan.com/profile/hypolite>
  */
@@ -18,9 +18,14 @@ function smileybutton_install()
 
 function smileybutton_jot_tool(string &$body)
 {
-	// this plugin may have smilies mobile devices do not have, disable for mobile by uncommenting return below
+	// Disable if theme is quattro
+	if (DI::appHelper()->getCurrentTheme() == 'quattro') {
+		return;
+	}
+
+	// Disable for mobile because they have a smiley key of their own
 	if (DI::mode()->isMobile() || DI::mode()->isMobile()) {
-//		return;
+		return;
 	}
 
 	$texts = [
@@ -80,12 +85,12 @@ function smileybutton_jot_tool(string &$body)
 	Hook::callAll('smilie', $params);
 
 	//Generate html for smiley list
-	$s = '<div class="smiley-preview">';
+	$s = '<table class="smiley-preview"><tr>';
 	for ($x = 0; $x < count($params['texts']); $x++) {
 		$icon = $params['icons'][$x];
-		$s .= '<span onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</span>';
+		$s .= '<td onclick="smileybutton_addsmiley(\'' . $params['texts'][$x] . '\')">' . $icon . '</td>';
 		if (($x + 1) % (floor(sqrt(count($params['texts']))) + 1) == 0) {
-			$s .= '</div>';
+			$s .= '</tr><tr>';
 		}
 	}
 	$s .= '</tr></table>';
@@ -107,7 +112,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 97ef8468..5fd60928 100644
--- a/smileybutton/view/default.css
+++ b/smileybutton/view/default.css
@@ -1,14 +1,3 @@
-/* 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;
 }
@@ -22,36 +11,15 @@
 	width: 18px;
 }
 
-div.smiley-preview img.smiley {
+table.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
-	cursor: pointer;
-	vertical-align: baseline;
 }
 
-div.smiley-preview {
+table.smiley-preview {
 	border: 1px solid #AAAAAA;
-	max-height: 200px;
-	overflow: auto;
 }
 
-div.smiley-preview > span {
+table.smiley-preview td {
 	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 1ad73d24..92ff4eba 100644
--- a/smileybutton/view/duepuntozero.css
+++ b/smileybutton/view/duepuntozero.css
@@ -1,15 +1,3 @@
-/* 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;
 }
@@ -29,41 +17,21 @@
 	background: none;
 }
 
-div.smiley-preview img.smiley {
+table.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
 	cursor: pointer;
-	vertical-align: baseline;
 }
 
-div.smiley-preview {
+table.smiley-preview {
 	border: 1px solid #AAAAAA;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
 	position: relative;
-	left: auto;
+	left: 285px;
 	top: -36px;
-	max-height: 200px;
-	overflow: auto;
 }
 
-div.smiley-preview > span {
+table.smiley-preview td {
 	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 7c1596bf..dce84826 100644
--- a/smileybutton/view/frio.css
+++ b/smileybutton/view/frio.css
@@ -1,80 +1,29 @@
-/* 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 {
-	display: none;
-}
-	.smiley_button::before {
-		content: '\f055';
-		font-family: ForkAwesome;
-		font-size: inherit;
-		color: inherit;
-	}
 
-div.smiley-preview img.smiley {
+.smiley_button > img {
+	height: 14px;
+	width: 14px;
+}
+
+table.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
-	cursor: pointer;
-	vertical-align: baseline;
 }
 
-div.smiley-preview {
-	border: none;
-	max-height: 200px;
-	overflow: auto;
+table.smiley-preview {
+	border: 1px solid #AAAAAA;
 }
 
-div.smiley-preview > span {
+table.smiley-preview td {
 	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
deleted file mode 100644
index c48ef2c6..00000000
--- a/smileybutton/view/quattro.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* 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 13dad74e..2f30799f 100644
--- a/smileybutton/view/smoothly.css
+++ b/smileybutton/view/smoothly.css
@@ -1,80 +1,34 @@
-/* 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: 0px;
+	left: -330px;
 	margin: 4px;
 	-moz-border-radius: 0px;
 	border-radius: 0px;
 }
 
-div.smiley-preview img.smiley {
+table.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
 	cursor: pointer;
-	vertical-align: baseline;
 }
 
-div.smiley-preview {
-	border: none;
+table.smiley-preview {
+	border: 1px solid #AAAAAA;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
 	margin: 5px;
-	max-height: 200px;
-	overflow: auto;
 }
 
-div.smiley-preview > span {
+table.smiley-preview td {
 	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 41ed7e5c..5862759b 100644
--- a/smileybutton/view/vier.css
+++ b/smileybutton/view/vier.css
@@ -1,15 +1,3 @@
-/* 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;
@@ -45,37 +33,17 @@
 	margin-right: 18px;
 }
 
-div.smiley-preview {
+table.smiley-preview {
 	background-color: #FFF;
 	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
-	max-height: 200px;
-	overflow: auto;
 }
 
-div.smiley-preview img.smiley {
+table.smiley-preview img.smiley {
 	max-height: 25px;
 	max-width: 25px;
 	cursor: pointer;
-	vertical-align: baseline;
 }
 
-div.smiley-preview > span {
+table.smiley-preview td {
 	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;
-	}