diff --git a/src/resources/icons/close_grey.svg b/src/resources/icons/close_grey.svg
new file mode 100644
index 00000000..9f101e1d
--- /dev/null
+++ b/src/resources/icons/close_grey.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#BDBDBD" d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
+	L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
+	c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
+	c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
+</svg>
diff --git a/src/resources/icons/close_red.svg b/src/resources/icons/close_red.svg
new file mode 100644
index 00000000..3f300f1c
--- /dev/null
+++ b/src/resources/icons/close_red.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#C9302C" d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
+	L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
+	c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
+	c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
+</svg>
diff --git a/src/resources/icons/float.svg b/src/resources/icons/float.svg
new file mode 100644
index 00000000..50029f9a
--- /dev/null
+++ b/src/resources/icons/float.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path d="M64,144v304h303.9V144H64z M351.9,432H80V160h271.9V432z"/>
+	<g>
+		<polygon points="448,64 144,64 144,128 160,128 160,80 432,80 432,352 384,352 384,368 448,368 		"/>
+	</g>
+</g>
+</svg>
diff --git a/src/resources/vnote.qss b/src/resources/vnote.qss
index 4b39ec07..83820997 100644
--- a/src/resources/vnote.qss
+++ b/src/resources/vnote.qss
@@ -80,6 +80,11 @@ QMenuBar::item:selected {
 }
 
 /* DockWidget */
+QDockWidget {
+    titlebar-close-icon: url(:/resources/icons/close.svg);
+    titlebar-normal-icon: url(:/resources/icons/float.svg);
+}
+
 QDockWidget::Title {
     background: @base-color;
 }
@@ -91,6 +96,10 @@ QDockWidget::close-button, QDockWidget::float-button {
 QDockWidget::close-button:hover, QDockWidget::float-button:hover {
     background-color: @hover-color;
 }
+
+QDockWidget::close-button:focus, QDockWidget::float-button:focus {
+    background-color: @focus-color;
+}
 /* End DockWidget */
 
 /* QComboBox#NotebookSelector */
@@ -189,3 +198,16 @@ QWidget[NotebookPanel="true"] {
     padding-left: 3px;
 }
 
+QTabBar::close-button {
+    image: url(:/resources/icons/close_grey.svg);
+}
+
+QTabBar::close-button:hover {
+    image: url(:/resources/icons/close.svg);
+    background-color: @hover-color;
+}
+
+QTabBar::close-button:focus {
+    image: url(:/resources/icons/close.svg);
+    background-color: @focus-color;
+}
diff --git a/src/utils/vutils.cpp b/src/utils/vutils.cpp
index 4e19c165..a0c380b1 100644
--- a/src/utils/vutils.cpp
+++ b/src/utils/vutils.cpp
@@ -13,6 +13,7 @@
 #include <QImageReader>
 #include <QKeyEvent>
 #include <QScreen>
+#include <cmath>
 
 const QVector<QPair<QString, QString>> VUtils::c_availableLanguages = {QPair<QString, QString>("en_US", "Englisth(US)"),
                                                                        QPair<QString, QString>("zh_CN", "Chinese")};
@@ -356,6 +357,6 @@ qreal VUtils::calculateScaleFactor()
 
 bool VUtils::realEqual(qreal p_a, qreal p_b)
 {
-    return abs(p_a - p_b) < 1e-8;
+    return std::abs(p_a - p_b) < 1e-8;
 }
 
diff --git a/src/vnote.qrc b/src/vnote.qrc
index 0b6b5138..9ef5a181 100644
--- a/src/vnote.qrc
+++ b/src/vnote.qrc
@@ -94,5 +94,8 @@
         <file>utils/mermaid/mermaid.dark.css</file>
         <file>utils/mermaid/mermaid.forest.css</file>
         <file>utils/mermaid/mermaidAPI.min.js</file>
+        <file>resources/icons/close_red.svg</file>
+        <file>resources/icons/close_grey.svg</file>
+        <file>resources/icons/float.svg</file>
     </qresource>
 </RCC>