diff --git a/README.md b/README.md
index 42be996..6b45ddd 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,8 @@ CodeSnap is highly configurable. Here's a list of settings you can change to tun
 
 **`codesnap.roundedCorners`:** Boolean value to use rounded corners or square corners for the window.
 
+**`codesnap.headerDotSize`:** The size for the snippet's header dot. Can be any valid CSS width or height.
+
 **`codesnap.showWindowControls`:** Boolean value to show or hide OS X style window buttons.
 
 **`codesnap.showWindowTitle`:** Boolean value to show or hide window title `folder_name - file_name`.
diff --git a/package.json b/package.json
index 5f63377..9751e79 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,12 @@
           "default": true,
           "description": "Use rounded corners for the window"
         },
+        "codesnap.headerDotSize": {
+          "scope": "resource",
+          "type": "string",
+          "default": "15px",
+          "description": "The size of the snippet's header dot"
+        },
         "codesnap.showWindowControls": {
           "scope": "resource",
           "type": "boolean",
diff --git a/src/extension.js b/src/extension.js
index 6f31aa4..2a61f29 100644
--- a/src/extension.js
+++ b/src/extension.js
@@ -15,6 +15,7 @@ const getConfig = () => {
     'boxShadow',
     'containerPadding',
     'roundedCorners',
+    'headerDotSize',
     'showWindowControls',
     'showWindowTitle',
     'showLineNumbers',
diff --git a/webview/src/index.js b/webview/src/index.js
index b0777e1..aca3245 100644
--- a/webview/src/index.js
+++ b/webview/src/index.js
@@ -26,6 +26,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
       boxShadow,
       containerPadding,
       roundedCorners,
+      headerDotSize,
       showWindowControls,
       showWindowTitle,
       windowTitle
@@ -38,6 +39,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
     setVar('box-shadow', boxShadow);
     setVar('container-padding', containerPadding);
     setVar('window-border-radius', roundedCorners ? '4px' : 0);
+    setVar('header-dot-size', headerDotSize);
 
     navbarNode.hidden = !showWindowControls && !showWindowTitle;
     windowControlsNode.hidden = !showWindowControls;
diff --git a/webview/style.css b/webview/style.css
index 310640e..8ff9686 100644
--- a/webview/style.css
+++ b/webview/style.css
@@ -6,6 +6,7 @@ html {
   --box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
   --container-padding: 3em;
   --window-border-radius: 4px;
+  --header-dot-size: 15px;
   box-sizing: border-box;
 }
 body {
@@ -92,10 +93,10 @@ body {
   text-align: center;
 }
 .dot {
-  width: 15px;
-  height: 15px;
+  width: var(--header-dot-size);
+  height: var(--header-dot-size);
   border-radius: 50%;
-  margin-right: 10px;
+  margin-right: calc(var(--header-dot-size) * 2 / 3);
 }
 .red {
   background-color: #ff5f5a;