diff --git a/bullet_threading.css b/bullet_threading.css
new file mode 100644
index 0000000..f391b8b
--- /dev/null
+++ b/bullet_threading.css
@@ -0,0 +1,91 @@
+:root {
+  --ls-block-bullet-active-color: var(--ls-link-text-color);
+  --ls-block-bullet-threading-width: 1px;
+}
+
+.block-control {
+  z-index: 1;
+}
+
+.block-children {
+  border-left-width: var(--ls-block-bullet-threading-width);
+}
+
+.block-content-wrapper {
+  position: relative;
+}
+
+.bullet-container {
+  height: 14px !important;
+  width: 14px !important;
+  transform: translateX(-1.5px);
+}
+
+/* Block bullet path should only show in a nested block */
+.ls-block .bullet {
+  background-color: var(--ls-block-bullet-active-color);
+}
+.ls-block div.items-center {
+  position: relative;
+  height: 26px !important;
+}
+.ls-block:not(:focus-within) .bullet {
+  background-color: var(--ls-block-bullet-color);
+  transform: scale(1);
+}
+.ls-block .ls-block > div > div.items-center::before {
+  pointer-events: none;
+  content: "";
+  left: 0;
+  right: 6px;
+  top: -1px;
+  bottom: -1px;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1), calc(-50% + var(--ls-block-bullet-threading-width) * 0.5));
+  /* shift left 1px for border */
+  position: absolute;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom-left-radius: 10px;
+}
+.ls-block .ls-block:focus-within > div > div.items-center::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+.ls-block .block-children > .ls-block::before {
+  pointer-events: none;
+  content: "";
+  top: -1rem;
+  bottom: 0;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  left: 0;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1));
+  position: absolute;
+}
+.ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+.ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
+  border-color: transparent;
+}
+
+.ls-block[haschild=true] > div > .block-content-wrapper::before {
+  pointer-events: none;
+  content: "";
+  top: 12px;
+  bottom: 0;
+  left: -17px;
+  position: absolute;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+}
+.ls-block[haschild=true] > .heading > .block-content-wrapper::before {
+  top: calc(50% + 2px);
+}
+.ls-block[haschild=true]:focus-within > div > .block-content-wrapper::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+
+.doc-mode div.items-center::before,
+.doc-mode div.items-center::after,
+.doc-mode .ls-block::before,
+.doc-mode .ls-block::after {
+  display: none;
+}
diff --git a/custom.css b/custom.css
index 3c4be8f..4f3fe5b 100644
--- a/custom.css
+++ b/custom.css
@@ -352,9 +352,6 @@ a.title h1.title {
 }
 
 :root {
-  --ct-guideline-color: var(--ct-bold-color-transparent);
-  --ct-guideline-size: 2px;
-  --ct-guideline-style: solid;
   --ct-bullet-size: 6px;
   --ct-bullet-color: var(--ct-bold-color);
   --ct-bullet-active-color: var(--ls-active-primary-color);
@@ -400,17 +397,6 @@ a.title h1.title {
   font-variant-numeric: tabular-nums;
 }
 
-/* vertical lines and bullets */
-.block-children {
-  border-left: var(--ct-guideline-size) var(--ct-guideline-style) var(--ct-guideline-color);
-}
-
-.bullet-container {
-  width: 14px;
-  height: 14px;
-  transform: translateX(-1px);
-}
-
 .bullet-container .bullet {
   width: var(--ct-bullet-size);
   height: var(--ct-bullet-size);
@@ -468,91 +454,102 @@ a:hover > .bullet-container .bullet {
   transform: scaleY(1);
 }
 
-/************************* 
- * Editing block threading
- *************************/
-.ls-block > div > div.items-center {
-  height: 26px !important;
-  position: relative;
+/* Block oversize issue */
+.block-content-wrapper {
+  max-width: var(--ct-block-max-width);
 }
 
-div.items-center::before,
-div.items-center::after,
-.ls-block::before,
-.ls-block::after,
-.block-content-wrapper::before {
-  pointer-events: none;
+.block-content-wrapper > div.flex-1 {
+  width: 100%;
 }
 
-.ls-block > div > div.items-center::before {
-  content: "";
-  height: 100%;
-  left: -2px;
-  right: 7px;
-  top: calc(-50% + 1px);
-  position: absolute;
-  border-left: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-bottom-left-radius: 10px;
+.block-content .resize {
+  max-width: -webkit-fill-available;
 }
 
-.blocks-container > .ls-block > div > div.items-center::before,
-.blocks-container > .ls-block:focus-within > div > div.items-center::after,
-.blocks-container > .block-children:focus-within > .ls-block::before, .blocks-container > #lazy-blocks > .ls-block > div > div.items-center::before,
-.blocks-container > #lazy-blocks > .ls-block:focus-within > div > div.items-center::after,
-.blocks-container > #lazy-blocks > .block-children:focus-within > .ls-block::before {
-  display: none;
+:root {
+  --ls-block-bullet-active-color: var(--ls-link-text-color);
+  --ls-block-bullet-threading-width: 1px;
 }
 
-.ls-block:focus-within > div > div.items-center::before {
-  border-color: var(--ct-bullet-active-color);
+.block-control {
+  z-index: 1;
 }
 
-.ls-block > div > div.items-center::after {
-  content: "";
-  height: calc(100% - 10px);
-  top: -50%;
-  left: -2px;
-  position: absolute;
-  border-left: 2px solid transparent;
+.block-children {
+  border-left-width: var(--ls-block-bullet-threading-width);
 }
 
-.ls-block:focus-within > div > div.items-center::after {
-  border-color: var(--ct-bullet-active-color);
+.block-content-wrapper {
+  position: relative;
+}
+
+.bullet-container {
+  height: 14px !important;
+  width: 14px !important;
+  transform: translateX(-1.5px);
 }
 
-.block-children > .ls-block::before {
+/* Block bullet path should only show in a nested block */
+.ls-block .bullet {
+  background-color: var(--ls-block-bullet-active-color);
+}
+.ls-block div.items-center {
+  position: relative;
+  height: 26px !important;
+}
+.ls-block:not(:focus-within) .bullet {
+  background-color: var(--ls-block-bullet-color);
+  transform: scale(1);
+}
+.ls-block .ls-block > div > div.items-center::before {
+  pointer-events: none;
   content: "";
-  top: -10px;
+  left: 0;
+  right: 6px;
+  top: -1px;
+  bottom: -1px;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1), calc(-50% + var(--ls-block-bullet-threading-width) * 0.5));
+  /* shift left 1px for border */
+  position: absolute;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom-left-radius: 10px;
+}
+.ls-block .ls-block:focus-within > div > div.items-center::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+.ls-block .block-children > .ls-block::before {
+  pointer-events: none;
+  content: "";
+  top: -1rem;
   bottom: 0;
-  border-left: 2px solid transparent;
-  left: -2px;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  left: 0;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1));
   position: absolute;
 }
-
-.block-children:focus-within > .ls-block:not(:focus-within)::before {
-  border-color: var(--ct-bullet-active-color);
+.ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before {
+  border-color: var(--ls-block-bullet-active-color);
 }
-
-.block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
+.ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
   border-color: transparent;
 }
 
-.ls-block > div > .block-content-wrapper {
-  position: relative;
-}
-
-.ls-block > div > .block-content-wrapper::before {
+.ls-block[haschild=true] > div > .block-content-wrapper::before {
+  pointer-events: none;
   content: "";
   top: 12px;
   bottom: 0;
   left: -17px;
   position: absolute;
-  border-left: 2px solid transparent;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+}
+.ls-block[haschild=true] > .heading > .block-content-wrapper::before {
+  top: calc(50% + 2px);
 }
-
 .ls-block[haschild=true]:focus-within > div > .block-content-wrapper::before {
-  border-color: var(--ct-bullet-active-color);
+  border-color: var(--ls-block-bullet-active-color);
 }
 
 .doc-mode div.items-center::before,
@@ -562,19 +559,6 @@ div.items-center::after,
   display: none;
 }
 
-/* Block oversize issue */
-.block-content-wrapper {
-  max-width: var(--ct-block-max-width);
-}
-
-.block-content-wrapper > div.flex-1 {
-  width: 100%;
-}
-
-.block-content .resize {
-  max-width: -webkit-fill-available;
-}
-
 /* embed */
 .embed,
 .embed-page,
diff --git a/package.json b/package.json
index 9e7e429..d0a11c5 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,20 @@
         "name": "Dev theme",
         "url": "./custom.css",
         "description": "A custom theme for dev"
+      },
+      {
+        "name": "Dev theme - bullet threading only",
+        "url": "./bullet_threading.css",
+        "description": "Bullet threading (already included in Dev Theme)"
       }
     ],
     "id": "pengx17_dev_theme",
     "icon": "./logo.png"
   },
   "scripts": {
-    "build": "yarn sass src/main.scss custom.css --no-source-map"
+    "build:main": "yarn sass src/main.scss custom.css --no-source-map",
+    "build:bt": "yarn sass src/bullet_threading.scss bullet_threading.css --no-source-map",
+    "build": "yarn build:main && yarn build:bt"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^5.0.1",
diff --git a/readme.md b/readme.md
index 5585509..f27d815 100644
--- a/readme.md
+++ b/readme.md
@@ -21,6 +21,19 @@ The easiest way to adopt this theme is to use jsDelivr CDN by adding the followi
 
 Alternatively, you can download this repo and load it as a Logseq Theme Plugin.
 
+### Only use bullet threading styles
+
+Since version `1.20.0`, you can opt in with the only the bullet threading css, which is `bullet_threading.css`.
+To change the color and width, set the following variables in `custom.css`:
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/bullet_threading.css");
+
+:root {
+  --ls-block-bullet-active-color: your-favorite-color;
+  --ls-block-bullet-threading-width: 2px;
+}
+```
 
 ## Demo (might be outdated)
 
diff --git a/release.config.js b/release.config.js
index b9052d7..6681886 100644
--- a/release.config.js
+++ b/release.config.js
@@ -14,7 +14,13 @@ module.exports = {
     [
       "@semantic-release/git",
       {
-        assets: ["CHANGELOG.md", "package.json", "yarn.lock", "custom.css"],
+        assets: [
+          "CHANGELOG.md",
+          "package.json",
+          "yarn.lock",
+          "custom.css",
+          "bullet_threading.css",
+        ],
       },
     ],
   ],
diff --git a/src/_blocks.scss b/src/_blocks.scss
index bc47d14..37c70a4 100644
--- a/src/_blocks.scss
+++ b/src/_blocks.scss
@@ -1,8 +1,4 @@
 :root {
-  --ct-guideline-color: var(--ct-bold-color-transparent);
-  --ct-guideline-size: 2px;
-  --ct-guideline-style: solid;
-
   --ct-bullet-size: 6px;
   --ct-bullet-color: var(--ct-bold-color);
   --ct-bullet-active-color: var(--ls-active-primary-color);
@@ -49,18 +45,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* vertical lines and bullets */
-.block-children {
-  border-left: var(--ct-guideline-size) var(--ct-guideline-style)
-    var(--ct-guideline-color);
-}
-
-.bullet-container {
-  width: 14px;
-  height: 14px;
-  transform: translateX(-1px);
-}
-
 .bullet-container .bullet {
   width: var(--ct-bullet-size);
   height: var(--ct-bullet-size);
@@ -102,7 +86,7 @@ a:hover > .bullet-container .bullet {
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
       width: 4px;
@@ -123,102 +107,6 @@ a:hover > .bullet-container .bullet {
   }
 }
 
-
-/************************* 
- * Editing block threading
- *************************/
-.ls-block > div > div.items-center {
-  height: 26px !important;
-  position: relative;
-}
-
-div.items-center::before,
-div.items-center::after,
-.ls-block::before,
-.ls-block::after,
-.block-content-wrapper::before {
-  pointer-events: none;
-}
-
-.ls-block > div > div.items-center::before {
-  content: "";
-  height: 100%;
-  left: -2px;
-  right: 7px;
-  top: calc(-50% + 1px);
-  position: absolute;
-  border-left: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-bottom-left-radius: 10px;
-}
-
-// Don't draw threading for the root level block. Better to have a "has-parent"
-.blocks-container, .blocks-container > #lazy-blocks {
-  > .ls-block > div > div.items-center::before,
-  > .ls-block:focus-within > div > div.items-center::after,
-  > .block-children:focus-within > .ls-block::before {
-    display: none;
-  }
-}
-
-.ls-block:focus-within > div > div.items-center::before {
-  border-color: var(--ct-bullet-active-color);
-}
-
-.ls-block > div > div.items-center::after {
-  content: "";
-  height: calc(100% - 10px);
-  top: -50%;
-  left: -2px;
-  position: absolute;
-  border-left: 2px solid transparent;
-}
-
-.ls-block:focus-within > div > div.items-center::after {
-  border-color: var(--ct-bullet-active-color);
-}
-
-.block-children > .ls-block::before {
-  content: "";
-  top: -10px;
-  bottom: 0;
-  border-left: 2px solid transparent;
-  left: -2px;
-  position: absolute;
-}
-
-.block-children:focus-within > .ls-block:not(:focus-within)::before {
-  border-color: var(--ct-bullet-active-color);
-}
-
-.block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
-  border-color: transparent;
-}
-
-.ls-block > div > .block-content-wrapper {
-  position: relative;
-}
-
-.ls-block > div > .block-content-wrapper::before {
-  content: "";
-  top: 12px;
-  bottom: 0;
-  left: -17px;
-  position: absolute;
-  border-left: 2px solid transparent;
-}
-
-.ls-block[haschild="true"]:focus-within > div > .block-content-wrapper::before {
-  border-color: var(--ct-bullet-active-color);
-}
-
-.doc-mode div.items-center::before,
-.doc-mode div.items-center::after,
-.doc-mode .ls-block::before,
-.doc-mode .ls-block::after {
-  display: none;
-}
-
 /* Block oversize issue */
 .block-content-wrapper {
   max-width: var(--ct-block-max-width);
diff --git a/src/bullet_threading.scss b/src/bullet_threading.scss
new file mode 100644
index 0000000..5b5dcdb
--- /dev/null
+++ b/src/bullet_threading.scss
@@ -0,0 +1,108 @@
+:root {
+  --ls-block-bullet-active-color: var(--ls-link-text-color);
+  --ls-block-bullet-threading-width: 1px;
+}
+
+.block-control {
+  z-index: 1;
+}
+
+.block-children {
+  border-left-width: var(--ls-block-bullet-threading-width);
+}
+
+.block-content-wrapper {
+  position: relative;
+}
+
+.bullet-container {
+  height: 14px !important;
+  width: 14px !important;
+  transform: translateX(-1.5px);
+}
+
+/* Block bullet path should only show in a nested block */
+
+.ls-block {
+  .bullet {
+    background-color: var(--ls-block-bullet-active-color);
+  }
+
+  div.items-center {
+    position: relative;
+    height: 26px !important;
+  }
+
+  &:not(:focus-within) .bullet {
+    background-color: var(--ls-block-bullet-color);
+    transform: scale(1);
+  }
+
+  .ls-block > div > div.items-center::before {
+    pointer-events: none;
+    content: "";
+    left: 0;
+    right: 6px;
+    top: -1px;
+    bottom: -1px;
+    transform: translate(
+      calc(var(--ls-block-bullet-threading-width) * -1),
+      calc(-50% + var(--ls-block-bullet-threading-width) * 0.5)
+    );
+    /* shift left 1px for border */
+    position: absolute;
+    border-left: var(--ls-block-bullet-threading-width) solid transparent;
+    border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
+    border-bottom-left-radius: 10px;
+  }
+
+  .ls-block:focus-within > div > div.items-center::before {
+    border-color: var(--ls-block-bullet-active-color);
+  }
+
+  .block-children > .ls-block::before {
+    pointer-events: none;
+    content: "";
+    top: -1rem;
+    bottom: 0;
+    border-left: var(--ls-block-bullet-threading-width) solid transparent;
+    left: 0;
+    transform: translate(calc(var(--ls-block-bullet-threading-width) * -1));
+    position: absolute;
+  }
+
+  .block-children:focus-within > .ls-block:not(:focus-within)::before {
+    border-color: var(--ls-block-bullet-active-color);
+  }
+
+  .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
+    border-color: transparent;
+  }
+}
+
+.ls-block[haschild="true"] {
+  > div > .block-content-wrapper::before {
+    pointer-events: none;
+    content: "";
+    top: 12px;
+    bottom: 0;
+    left: -17px;
+    position: absolute;
+    border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  }
+
+  > .heading > .block-content-wrapper::before {
+    top: calc(50% + 2px);
+  }
+
+  &:focus-within > div > .block-content-wrapper::before {
+    border-color: var(--ls-block-bullet-active-color);
+  }
+}
+
+.doc-mode div.items-center::before,
+.doc-mode div.items-center::after,
+.doc-mode .ls-block::before,
+.doc-mode .ls-block::after {
+  display: none;
+}
diff --git a/src/main.scss b/src/main.scss
index 5e2192b..4608c63 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -4,6 +4,7 @@
 @import "views.scss";
 @import "headings.scss";
 @import "blocks.scss";
+@import "bullet_threading.scss";
 @import "embed.scss";
 @import "miscs.scss";
 @import "popups.scss";