diff --git a/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/center.svg b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/center.svg
new file mode 100644
index 0000000000..ea834a35bd
--- /dev/null
+++ b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/center.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L12 4" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8H11" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 12L12 12" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h1.svg b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h1.svg
new file mode 100644
index 0000000000..8a87ece4f0
--- /dev/null
+++ b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h1.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.25344 3.6001H9.63344V12.0001H8.25344V8.3641H4.65344V12.0001H3.27344V3.6001H4.65344V7.0441H8.25344V3.6001Z" fill="white"/>
+<path d="M12.0325 6.4001H12.9925V12.0001H11.8885V7.5681L10.8325 7.8641L10.5605 6.9201L12.0325 6.4001Z" fill="white"/>
+</svg>
diff --git a/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h2.svg b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h2.svg
new file mode 100644
index 0000000000..9ce394b0b1
--- /dev/null
+++ b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h2.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.67531 3.6001H9.05531V12.0001H7.67531V8.3641H4.07531V12.0001H2.69531V3.6001H4.07531V7.0441H7.67531V3.6001Z" fill="white"/>
+<path d="M10.1104 12.0001V11.1761L12.0224 9.2081C12.449 8.7601 12.6624 8.38676 12.6624 8.0881C12.6624 7.86943 12.593 7.69343 12.4544 7.5601C12.321 7.42676 12.1477 7.3601 11.9344 7.3601C11.513 7.3601 11.201 7.57876 10.9984 8.0161L10.0704 7.4721C10.2464 7.0881 10.4997 6.79476 10.8304 6.5921C11.161 6.38943 11.5237 6.2881 11.9184 6.2881C12.425 6.2881 12.8597 6.4481 13.2224 6.7681C13.585 7.08276 13.7664 7.50943 13.7664 8.0481C13.7664 8.62943 13.4597 9.22677 12.8464 9.8401L11.7504 10.9361H13.8544V12.0001H10.1104Z" fill="white"/>
+</svg>
diff --git a/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h3.svg b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h3.svg
new file mode 100644
index 0000000000..43af128937
--- /dev/null
+++ b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h3.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.62063 3.6001H9.00063V12.0001H7.62063V8.3641H4.02062V12.0001H2.64062V3.6001H4.02062V7.0441H7.62063V3.6001Z" fill="white"/>
+<path d="M12.6637 8.6721C13.0424 8.7841 13.349 8.98143 13.5837 9.2641C13.8237 9.54143 13.9437 9.87743 13.9437 10.2721C13.9437 10.8481 13.749 11.2988 13.3597 11.6241C12.9757 11.9494 12.5037 12.1121 11.9437 12.1121C11.5064 12.1121 11.1144 12.0134 10.7677 11.8161C10.4264 11.6134 10.1784 11.3174 10.0237 10.9281L10.9677 10.3841C11.1064 10.8161 11.4317 11.0321 11.9437 11.0321C12.2264 11.0321 12.445 10.9654 12.5997 10.8321C12.7597 10.6934 12.8397 10.5068 12.8397 10.2721C12.8397 10.0428 12.7597 9.85876 12.5997 9.7201C12.445 9.58143 12.2264 9.5121 11.9437 9.5121H11.7037L11.2797 8.8721L12.3837 7.4321H10.1917V6.4001H13.7117V7.3121L12.6637 8.6721Z" fill="white"/>
+</svg>
diff --git a/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/left.svg b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/left.svg
new file mode 100644
index 0000000000..b4f2d0101e
--- /dev/null
+++ b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/left.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L12 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 8H10" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 12L12 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/link.svg b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/link.svg
new file mode 100644
index 0000000000..612e8377b6
--- /dev/null
+++ b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/link.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 8.91521C7.21574 9.22582 7.49099 9.48283 7.80707 9.66881C8.12315 9.85479 8.47268 9.96538 8.83194 9.99309C9.1912 10.0208 9.5518 9.96497 9.88926 9.8294C10.2267 9.69383 10.5332 9.48169 10.7878 9.20736L12.2949 7.58431C12.7525 7.07413 13.0056 6.39083 12.9999 5.68156C12.9942 4.9723 12.73 4.29384 12.2643 3.7923C11.7986 3.29075 11.1686 3.00627 10.51 3.0001C9.85142 2.99394 9.21693 3.26659 8.7432 3.75935L7.87913 4.68448" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 7.08479C8.78426 6.77418 8.50901 6.51717 8.19293 6.33119C7.87685 6.14521 7.52732 6.03462 7.16806 6.00691C6.8088 5.9792 6.4482 6.03503 6.11074 6.1706C5.77327 6.30617 5.46683 6.51831 5.21218 6.79264L3.7051 8.41569C3.24755 8.92587 2.99437 9.60918 3.00009 10.3184C3.00582 11.0277 3.26998 11.7062 3.73569 12.2077C4.2014 12.7092 4.8314 12.9937 5.48999 12.9999C6.14858 13.0061 6.78307 12.7334 7.2568 12.2407L8.11584 11.3155" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/right.svg b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/right.svg
new file mode 100644
index 0000000000..86a1facaac
--- /dev/null
+++ b/frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/right.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L12 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8H12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 12L12 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection/toolbar_widget.dart b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection/toolbar_widget.dart
index 19ca0101a9..117bf316dc 100644
--- a/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection/toolbar_widget.dart
+++ b/frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection/toolbar_widget.dart
@@ -18,9 +18,9 @@ ToolbarEventHandlers defaultToolbarEventHandlers = {
   'bulleted_list': (editorState) => formatBulletedList(editorState),
   'highlight': (editorState) => formatHighlight(editorState),
   'Text': (editorState) => formatText(editorState),
-  'H1': (editorState) => formatHeading(editorState, StyleKey.h1),
-  'H2': (editorState) => formatHeading(editorState, StyleKey.h2),
-  'H3': (editorState) => formatHeading(editorState, StyleKey.h3),
+  'h1': (editorState) => formatHeading(editorState, StyleKey.h1),
+  'h2': (editorState) => formatHeading(editorState, StyleKey.h2),
+  'h3': (editorState) => formatHeading(editorState, StyleKey.h3),
 };
 
 List<String> defaultListToolbarEventNames = [
@@ -95,7 +95,10 @@ class _ToolbarWidgetState extends State<ToolbarWidget> with ToolbarMixin {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             // _listToolbar(context),
-            // _centerToolbarIcon('divider', width: 10),
+            _centerToolbarIcon('h1', tooltipMessage: 'Heading 1'),
+            _centerToolbarIcon('h2', tooltipMessage: 'Heading 2'),
+            _centerToolbarIcon('h3', tooltipMessage: 'Heading 3'),
+            _centerToolbarIcon('divider', width: 2),
             _centerToolbarIcon('bold', tooltipMessage: 'Bold'),
             _centerToolbarIcon('italic', tooltipMessage: 'Italic'),
             _centerToolbarIcon('strikethrough',
@@ -134,11 +137,11 @@ class _ToolbarWidgetState extends State<ToolbarWidget> with ToolbarMixin {
           child: GestureDetector(
             onTap: onTap ?? () => _onTap(name),
             child: SizedBox.fromSize(
-              size: width != null
-                  ? Size(width, toolbarHeight)
-                  : Size.square(toolbarHeight),
+              size:
+                  Size(toolbarHeight - (width != null ? 20 : 0), toolbarHeight),
               child: Center(
                 child: FlowySvg(
+                  size: Size(width ?? 20, 20),
                   name: 'toolbar/$name',
                 ),
               ),