diff --git a/qcomment/qcomment.css b/qcomment/qcomment.css
deleted file mode 100644
index 3e5513bbc..000000000
--- a/qcomment/qcomment.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-#qcomment-label {
-	float: left;
-	width: 300px;
-	margin-top: 10px;
-}
-
-#qcomment-words {
-	float: left;
-	margin-top: 10px;
-	width: 100px;
-	height: 150px;
-
-}
-
-#qcomment-submit {
-	margin-top: 15px;
-}
-
diff --git a/qcomment/qcomment.js b/qcomment/qcomment.js
new file mode 100644
index 000000000..1f5c3496f
--- /dev/null
+++ b/qcomment/qcomment.js
@@ -0,0 +1,18 @@
+function qCommentInsert(obj, id)
+{
+	let $textarea = $('#comment-edit-text-' + id);
+
+	if ($textarea.val() === '') {
+		$textarea.addClass('comment-edit-text-full');
+		$textarea.removeClass('comment-edit-text-empty');
+		openMenu('comment-edit-submit-wrapper-' + id);
+	}
+
+	var ins = $(obj).val();
+	ins = ins.replace('&lt;', '<');
+	ins = ins.replace('&gt;', '>');
+	ins = ins.replace('&amp;', '&');
+	ins = ins.replace('&quot;', '"');
+	$textarea.val($textarea.val() + ins);
+	$(obj).val('');
+}
diff --git a/qcomment/qcomment.php b/qcomment/qcomment.php
index 4c78b8224..ed110f667 100644
--- a/qcomment/qcomment.php
+++ b/qcomment/qcomment.php
@@ -21,10 +21,16 @@ use Friendica\Core\Hook;
 use Friendica\DI;
 use Friendica\Util\XML;
 
-function qcomment_install() {
-	Hook::register('addon_settings', 'addon/qcomment/qcomment.php', 'qcomment_addon_settings');
-	Hook::register('addon_settings_post', 'addon/qcomment/qcomment.php', 'qcomment_addon_settings_post');
+function qcomment_install()
+{
+	Hook::register('addon_settings'     , __FILE__, 'qcomment_addon_settings');
+	Hook::register('addon_settings_post', __FILE__, 'qcomment_addon_settings_post');
+	Hook::register('footer'             , __FILE__, 'qcomment_footer');
+}
 
+function qcomment_footer(\Friendica\App $a, &$b)
+{
+	DI::page()->registerFooterScript(__DIR__ . '/qcomment.js');
 }
 
 function qcomment_addon_settings(&$a, &$s)
@@ -33,24 +39,16 @@ function qcomment_addon_settings(&$a, &$s)
 		return;
 	}
 
-	/* Add our stylesheet to the page so we can make our settings look nice */
-
-	DI::page()['htmlhead'] .= '<link rel="stylesheet"  type="text/css" href="' . DI::baseUrl()->get() . '/addon/qcomment/qcomment.css' . '" media="all" />' . "\r\n";
-
 	$words = DI::pConfig()->get(local_user(), 'qcomment', 'words', DI::l10n()->t(':-)') . "\n" . DI::l10n()->t(':-(') . "\n" .  DI::l10n()->t('lol'));
 
-	$s .= '<div class="settings-block">';
-	$s .= '<h3>' . DI::l10n()->t('Quick Comment Settings') . '</h3>';
-	$s .= '<div id="qcomment-wrapper">';
-	$s .= '<div id="qcomment-desc">' . DI::l10n()->t("Quick comments are found near comment boxes, sometimes hidden. Click them to provide simple replies.") . '</div>';
-	$s .= '<label id="qcomment-label" for="qcomment-words">' . DI::l10n()->t('Enter quick comments, one per line') . ' </label>';
-	$s .= '<textarea id="qcomment-words" type="text" name="qcomment-words" >' . htmlspecialchars(XML::unescape($words)) . '</textarea>';
-	$s .= '</div><div class="clear"></div>';
-
-	$s .= '<div class="settings-submit-wrapper" ><input type="submit" id="qcomment-submit" name="qcomment-submit" class="settings-submit" value="' . DI::l10n()->t('Save Settings') . '" /></div>';
-	$s .= '</div>';
-
-	return;
+	$t = \Friendica\Core\Renderer::getMarkupTemplate('settings.tpl', 'addon/qcomment/');
+	$s .= \Friendica\Core\Renderer::replaceMacros($t, [
+		'$postpost'    => isset($_POST['qcomment-words']),
+		'$header'      => DI::l10n()->t('Quick Comment Settings'),
+		'$description' => DI::l10n()->t("Quick comments are found near comment boxes, sometimes hidden. Click them to provide simple replies."),
+		'$save'        => DI::l10n()->t('Save Settings'),
+		'$words'       => ['qcomment-words', DI::l10n()->t('Enter quick comments, one per line'), $words, null, ' rows="10"'],
+	]);
 }
 
 function qcomment_addon_settings_post(&$a, &$b)
@@ -59,7 +57,7 @@ function qcomment_addon_settings_post(&$a, &$b)
 		return;
 	}
 
-	if ($_POST['qcomment-submit']) {
+	if (isset($_POST['qcomment-words'])) {
 		DI::pConfig()->set(local_user(), 'qcomment', 'words', XML::escape($_POST['qcomment-words']));
 	}
 }
diff --git a/qcomment/templates/settings.tpl b/qcomment/templates/settings.tpl
new file mode 100644
index 000000000..31ccea86d
--- /dev/null
+++ b/qcomment/templates/settings.tpl
@@ -0,0 +1,21 @@
+<span id="settings_qcomment_inflated" class="settings-block fakelink"
+      style="{{if $postpost}}display: none;{{else}}display: block;{{/if}}"
+      onclick="openClose('settings_qcomment_expanded'); openClose('settings_qcomment_inflated');">
+		<h3>{{$header}}</h3>
+</span>
+<div id="settings_qcomment_expanded" class="settings-block"
+     style="{{if $postpost}}display: block;{{else}}display: none;{{/if}}">
+	<span class="fakelink" onclick="openClose('settings_qcomment_expanded'); openClose('settings_qcomment_inflated');">
+		<h3>{{$header}}</h3>
+	</span>
+
+	<div id="qcomment-wrapper">
+		<p id="qcomment-desc">{{$description}}</p>
+
+		{{include file="field_textarea.tpl" field=$words}}
+
+		<div class="settings-submit-wrapper">
+			<button type="submit" id="qcomment-submit" name="qcomment-submit" class="btn btn-primary settings-submit">{{$save}}</button>
+		</div>
+	</div>
+</div>