diff --git a/lib/helper/converter/editor_to_html/class.ex b/lib/helper/converter/editor_to_html/class.ex
index f6bcabd64..27e3644d7 100644
--- a/lib/helper/converter/editor_to_html/class.ex
+++ b/lib/helper/converter/editor_to_html/class.ex
@@ -18,6 +18,7 @@ defmodule Helper.Converter.EditorToHTML.Class do
       # header
       "header" => %{
         "wrapper" => "header-wrapper",
+        "header" => "header",
         "eyebrow_title" => "eyebrow-title",
         "footer_title" => "footer-title"
       },
diff --git a/lib/helper/converter/editor_to_html/frags/header.ex b/lib/helper/converter/editor_to_html/frags/header.ex
index 88b0d03a1..e58ea7bb5 100644
--- a/lib/helper/converter/editor_to_html/frags/header.ex
+++ b/lib/helper/converter/editor_to_html/frags/header.ex
@@ -15,12 +15,13 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do
     %{"text" => text, "level" => level} = data
 
     wrapper_class = @class["wrapper"]
+    header_class = @class["header"]
     eyebrow_class = @class["eyebrow_title"]
     footer_class = @class["footer_title"]
 
     ~s(<div class="#{wrapper_class}">
         <div class="#{eyebrow_class}">#{eyebrow_title}</div>
-        <h#{level}>#{text}</h#{level}>
+        <h#{level} class="#{header_class}">#{text}</h#{level}>
         <div class="#{footer_class}">#{footer_title}</div>
       </div>)
   end
@@ -29,11 +30,12 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do
     %{"text" => text, "level" => level} = data
 
     wrapper_class = @class["wrapper"]
+    header_class = @class["header"]
     eyebrow_class = @class["eyebrow_title"]
 
     ~s(<div class="#{wrapper_class}">
         <div class="#{eyebrow_class}">#{eyebrow_title}</div>
-        <h#{level}>#{text}</h#{level}>
+        <h#{level} class="#{header_class}">#{text}</h#{level}>
       </div>)
   end
 
@@ -41,10 +43,11 @@ defmodule Helper.Converter.EditorToHTML.Frags.Header do
     %{"text" => text, "level" => level} = data
 
     wrapper_class = @class["wrapper"]
+    header_class = @class["header"]
     footer_class = @class["footer_title"]
 
     ~s(<div class="#{wrapper_class}">
-        <h#{level}>#{text}</h#{level}>
+        <h#{level} class="#{header_class}">#{text}</h#{level}>
         <div class="#{footer_class}">#{footer_title}</div>
       </div>)
   end
diff --git a/lib/helper/converter/editor_to_html/frontend_test/script.js b/lib/helper/converter/editor_to_html/frontend_test/script.js
index 18d363d3d..950522bbb 100644
--- a/lib/helper/converter/editor_to_html/frontend_test/script.js
+++ b/lib/helper/converter/editor_to_html/frontend_test/script.js
@@ -1,5 +1,11 @@
 content =
-  '<div class="article-viewer-wrapper"><div class="list-wrapper"><div class="list-item ">\n        <div class="list__item-order-prefix">1.</div>\n        <div class="list-label list-label__default" data-index="0">\n        label\n      </div>\n        <div class="list-item-text">\n        一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。\n      </div>\n      </div><div class="list-item ">\n        <div class="list__item-order-prefix">2.</div>\n        <div class="list-label list-label__default" data-index="0">\n        label\n      </div>\n        <div class="list-item-text">\n        list item\n      </div>\n      </div><div class="list-item list-indent-1">\n        <div class="list__item-order-prefix">2.1</div>\n        <div class="list-label list-label__green" data-index="1">\n        green\n      </div>\n        <div class="list-item-text">\n        list item\n      </div>\n      </div></div></div>';
+  // header
+  // '<div class="article-viewer-wrapper"><div class="header-wrapper">\n        <div class="eyebrow-title">eyebrow title content</div>\n        <h1 class="header">header content</h1>\n      </div></div>';
+  '<div class="article-viewer-wrapper"><div class="header-wrapper">\n        <h1 class="header">header content</h1>\n        <div class="footer-title">footer title content</div>\n      </div></div>';
+// '<div class="article-viewer-wrapper"><div class="header-wrapper">\n        <div class="eyebrow-title">eyebrow title content</div>\n        <h1 class="header">header content</h1>\n        <div class="footer-title">footer title content</div>\n      </div></div>';
+
+// list
+// '<div class="article-viewer-wrapper"><div class="list-wrapper"><div class="list-item ">\n        <div class="list__item-order-prefix">1.</div>\n        <div class="list-label list-label__default" data-index="0">\n        label\n      </div>\n        <div class="list-item-text">\n        一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。一个带着中文的很长的句子。\n      </div>\n      </div><div class="list-item ">\n        <div class="list__item-order-prefix">2.</div>\n        <div class="list-label list-label__default" data-index="0">\n        label\n      </div>\n        <div class="list-item-text">\n        list item\n      </div>\n      </div><div class="list-item list-indent-1">\n        <div class="list__item-order-prefix">2.1</div>\n        <div class="list-label list-label__green" data-index="1">\n        green\n      </div>\n        <div class="list-item-text">\n        list item\n      </div>\n      </div></div></div>';
 
 const articleEl = document.getElementById("article");
 
diff --git a/lib/helper/converter/editor_to_html/frontend_test/styles.css b/lib/helper/converter/editor_to_html/frontend_test/styles.css
index 28f7a3e1d..49804cc76 100644
--- a/lib/helper/converter/editor_to_html/frontend_test/styles.css
+++ b/lib/helper/converter/editor_to_html/frontend_test/styles.css
@@ -23,6 +23,40 @@ body {
   max-height: 100%;
 }
 
+/* header block */
+
+.article-viewer-wrapper .header-wrapper {
+}
+
+.article-viewer-wrapper .header {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.article-viewer-wrapper .header-wrapper h1 {
+  position: relative;
+  font-size: 28px;
+}
+
+.article-viewer-wrapper .eyebrow-title {
+  font-size: 16px;
+  margin-bottom: 5px;
+  margin-top: 20px;
+  line-height: 24px;
+  width: 100%;
+  color: grey;
+}
+
+.article-viewer-wrapper .footer-title {
+  font-size: 16px;
+  margin-top: 5px;
+  margin-bottom: 18px;
+  line-height: 24px;
+  width: 100%;
+  color: grey;
+}
+
+/* list block */
 .article-viewer-wrapper .list-wrapper {
   padding: 1.2em 0;
 }
@@ -168,3 +202,5 @@ body {
   color: #526c73;
   word-break: break-all;
 }
+
+/* list block end */
diff --git a/test/helper/converter/editor_to_html_test/header_test.exs b/test/helper/converter/editor_to_html_test/header_test.exs
index 30303a3c8..70a4a82ee 100644
--- a/test/helper/converter/editor_to_html_test/header_test.exs
+++ b/test/helper/converter/editor_to_html_test/header_test.exs
@@ -5,8 +5,13 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
 
   alias Helper.Converter.EditorToHTML, as: Parser
   alias Helper.Converter.EditorToHTML.{Class, Frags}
+  alias Helper.Utils
 
   @root_class Class.article()
+  @class get_in(@root_class, ["header"])
+
+  @eyebrow_class @class["eyebrow_title"]
+  @footer_class @class["footer_title"]
 
   describe "[header block unit]" do
     @editor_json %{
@@ -36,7 +41,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       ],
       "version" => "2.15.0"
     }
-    @tag :wip2
+    @tag :wip
     test "header parse should work" do
       {:ok, editor_string} = Jason.encode(@editor_json)
       {:ok, converted} = Parser.to_html(editor_string)
@@ -71,18 +76,12 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       {:ok, editor_string} = Jason.encode(@editor_json)
       {:ok, converted} = Parser.to_html(editor_string)
 
-      frag =
-        Frags.Header.get(%{
-          "text" => "header content",
-          "level" => 1,
-          "eyebrowTitle" => "eyebrow title content",
-          "footerTitle" => "footer title content"
-        })
-
-      viewer_class = @root_class["viewer"]
+      # header_class = @class["header"]
 
-      assert converted ==
-               ~s(<div class="#{viewer_class}">#{frag}</div>)
+      # IO.inspect(converted, label: "header converted")
+      # assert Utils.str_occurence(converted, header_class) == 1
+      assert Utils.str_occurence(converted, @eyebrow_class) == 1
+      assert Utils.str_occurence(converted, @footer_class) == 1
     end
 
     @editor_json %{
@@ -108,17 +107,8 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       {:ok, editor_string} = Jason.encode(json)
       {:ok, converted} = Parser.to_html(editor_string)
 
-      frag =
-        Frags.Header.get(%{
-          "text" => "header content",
-          "level" => 1,
-          "eyebrowTitle" => "eyebrow title content"
-        })
-
-      viewer_class = @root_class["viewer"]
-
-      assert converted ==
-               ~s(<div class="#{viewer_class}">#{frag}</div>)
+      assert Utils.str_occurence(converted, @eyebrow_class) == 1
+      assert Utils.str_occurence(converted, @footer_class) == 0
 
       json =
         Map.merge(@editor_json, %{
@@ -137,17 +127,10 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.Header do
       {:ok, editor_string} = Jason.encode(json)
       {:ok, converted} = Parser.to_html(editor_string)
 
-      frag =
-        Frags.Header.get(%{
-          "text" => "header content",
-          "level" => 1,
-          "footerTitle" => "footer title content"
-        })
-
-      viewer_class = @root_class["viewer"]
+      IO.inspect(converted, label: "converted --")
 
-      assert converted ==
-               ~s(<div class="#{viewer_class}">#{frag}</div>)
+      assert Utils.str_occurence(converted, @eyebrow_class) == 0
+      assert Utils.str_occurence(converted, @footer_class) == 1
     end
 
     @tag :wip
diff --git a/test/helper/converter/editor_to_html_test/list_test.exs b/test/helper/converter/editor_to_html_test/list_test.exs
index db5b0c621..795655d2e 100644
--- a/test/helper/converter/editor_to_html_test/list_test.exs
+++ b/test/helper/converter/editor_to_html_test/list_test.exs
@@ -64,7 +64,7 @@ defmodule GroupherServer.Test.Helper.Converter.EditorToHTML.List do
       assert Utils.str_occurence(converted, unorder_list_prefix_class) == 3
     end
 
-    @tag :wip2
+    @tag :wip
     test "basic order list parse should work" do
       editor_json =
         set_items("order_list", [