diff --git a/mod/help.php b/mod/help.php
index e4442f7ca3..981fe97f70 100644
--- a/mod/help.php
+++ b/mod/help.php
@@ -69,7 +69,7 @@ function help_content(App $a) {
 	if ($filename !== "Home") {
 		// create TOC but not for home
 		$lines = explode("\n", $html);
-		$toc="<style>aside ul {padding-left: 1em;}aside h1{font-size:2em}</style><h2>TOC</h2><ul id='toc'>";
+		$toc="<h2>TOC</h2><ul id='toc'>";
 		$lastlevel=1;
 		$idnum = [0,0,0,0,0,0,0];
 		foreach($lines as &$line){
@@ -94,16 +94,9 @@ function help_content(App $a) {
 		for($k=0;$k<$lastlevel; $k++) $toc.="</ul>";
 		$html = implode("\n",$lines);
 
-		$a->page['aside'] = '<section class="help-aside-wrapper">' . $toc . $a->page['aside'] . '</section>';
+		$a->page['aside'] = '<div class="help-aside-wrapper widget"><div id="toc-wrapper">' . $toc . '</div>' . $a->page['aside'] . '</div>';
 	}
 
-	$html = "
-		<style>
-		.md_warning {
-			padding: 1em; border: #ff0000 solid 2px;
-			background-color: #f9a3a3; color: #ffffff;
-		}
-		</style>".$html;
 	return $html;
 
 }
diff --git a/view/global.css b/view/global.css
index 9d62cf0306..0e6a36e2c6 100644
--- a/view/global.css
+++ b/view/global.css
@@ -464,6 +464,22 @@ td.federation-data {
   opacity: 0.3;
 }
 
+/* help widget */
+aside .help-aside-wrapper ul {
+  padding-left: 1em;
+}
+
+aside .help-aside-wrapper h1 {
+  font-size:2em
+}
+
+.md_warning {
+  padding: 1em;
+  border: #ff0000 solid 2px;
+  background-color: #f9a3a3;
+  color: #ffffff;
+}
+
 #forum-widget-collapse:hover {
   opacity: 1.0;
 }
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 18b2f42088..e1ac4f4da5 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -99,7 +99,6 @@ blockquote {
 code {
     white-space: pre-wrap;
 }
-.help-content-wrapper code, .help-aside-wrapper code {display: inline}
 
 /**
  * mobile aside
@@ -1056,6 +1055,25 @@ aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover{
     padding-left: 27px;
 }
 
+/* help page widget */
+aside > .help-content-wrapper code, .help-aside-wrapper code {
+    display: inline
+}
+aside > .help-aside-wrapper p strong:first-child {
+    display: block;
+    margin: 1em 0 0em;
+}
+aside > .help-aside-wrapper h1 {
+    font-weight: bold;
+    font-size: 16px;
+    margin: 0;
+    padding: 20px 0 10px;
+}
+aside > .help-aside-wrapper h2 {
+    font-weight: bold;
+    font-size: 14px;
+}
+
 /* vcard / h-card */
 aside .vcard #profile-photo-wrapper{
     margin: 0;