diff --git a/.gitignore b/.gitignore
index 3f5982e459..729ed02612 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .idea/
+.DS_Store
 npm-debug.log*
 lerna-debug.log
 node_modules
diff --git a/docs/README.md b/docs/README.md
index 67551896a9..4f2a900506 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -62,6 +62,11 @@ commitlint --from=HEAD~1
 * **Concepts** - Overarching topics important to understand the use of `commitlint`
 * **Reference** - Mostly technical documentation
 
+## Attributions
+
+* `commitlint` is possible because of the hard work of the folks of the `conventional-changelog` project
+* Thanks [@markusoelhafen](https://github.com/markusoelhafen) for providing
+the `commitlint` icon
 
 [0]: https://img.shields.io/badge/stability-stable-green.svg?style=flat-square
 [1]: https://nodejs.org/api/documentation.html#documentation_stability_index
diff --git a/docs/assets/icon.png b/docs/assets/icon.png
new file mode 100644
index 0000000000..51f9d54be9
Binary files /dev/null and b/docs/assets/icon.png differ
diff --git a/docs/assets/icon.svg b/docs/assets/icon.svg
new file mode 100644
index 0000000000..23d6c600e7
--- /dev/null
+++ b/docs/assets/icon.svg
@@ -0,0 +1,5 @@
+<svg width="180" height="180" xmlns="http://www.w3.org/2000/svg">
+  <rect rx="11" height="180" width="180" y="0" x="0" fill="#000000"/>
+  <path fill="#ce3d40" d="m105.8597,101.89649l30,0l0,4.4l-30,0l0,-4.4zm17.68388,8.8l8.98279,13.2l-5.07564,0l-6.57277,-8.60106l-6.60929,8.60106l-5.07564,0l8.98279,-13.2l5.36776,0z"/>
+  <text text-anchor="middle" font-family="'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace" font-size="50" y="106" x="67.5" fill="#50b2dd">cl</text>
+</svg>
diff --git a/docs/index.html b/docs/index.html
index 5e52103906..a85be5bc43 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,7 +7,15 @@
 	<meta name="description" content="Lint commit messages">
 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 	<link rel="stylesheet" href="https://unpkg.com/docsify/lib/themes/dark.css">
+	<link rel="icon" type="image/png" href="./assets/icon.png">
+	<link rel="icon" type="image/svg+xml" href="./assets/icon.svg">
 	<style>
+		:root {
+			--theme-color: #51b1dd;
+		}
+		body {
+			background: #121212;
+		}
 		.app-nav.app-nav {
 			display: flex;
 			justify-content: flex-end;
@@ -16,7 +24,7 @@
 			margin: 0;
 			padding: 0 15px;
 			height: 60px;
-			background: #3f3f3f;
+			background: #121212;
 		}
 		svg {
 			pointer-events: none;
@@ -27,7 +35,16 @@
 		}
 		a:hover svg {
 			fill: #ea6f5a;
-			fill: var(--theme-color,#ea6f5a);
+			fill: var(--theme-color, #51b1dd);
+		}
+		.results-panel {
+			background: #121212;
+		}
+		.sidebar.sidebar {
+			background: #121212;
+		}
+		.sidebar-toggle.sidebar-toggle {
+			background: #121212;
 		}
 		.search.search {
 			border: none;
@@ -37,7 +54,7 @@
 			background: transparent;
 			line-height: 40px;
 			padding: 6px;
-			background: rgba(255, 255, 255, 0.05);
+			background: #000;
 			border-bottom: 1px solid transparent;
 		}
 		.search.search input:focus {
@@ -75,6 +92,27 @@
 			right: 0;
 			bottom: 0;
 		}
+		.app-name-link {
+			display: flex;
+			align-items: center;
+			margin: 6px 15px;
+		}
+		.app-name-link::before {
+			content: '';
+			display: inline-block;
+			width: 40px;
+			height: 40px;
+			background: url(./assets/icon.svg);
+			background-size: 100%;
+			margin-right: 15px;
+		}
+		.markdown-section.markdown-section p.warn {
+			background: var(--theme-color, #51b1dd);
+			color: #fff;
+		}
+		.markdown-section.markdown-section a {
+			color: #fff;
+		}
 	</style>
 </head>