diff --git a/app.py b/app.py
index ee9a7cb..1c9570b 100644
--- a/app.py
+++ b/app.py
@@ -120,221 +120,194 @@ def post_detail(post_id):
 
         post["template"] = "components/timeline_post.html"
         post["timeline"] = """
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('movedsomewebbasedtoolstolocalhost', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-13
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        moved some web-based tools to localhost
+      </h3>
+      
+      <div id="movedsomewebbasedtoolstolocalhost">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          a testing page for blog preview and some string formatter...<br>It's also my first time to correctly using git, to upload edited pages directly via rsync and synchronization via git.
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item1', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-13
-</time>
-
-<div id="item1" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-moved some web-based tools to localhost
-</h3>
-
-<p class="text-gray-500 mt-1">
-a testing page for blog preview and some string formatter...<br>It's also my first time to correctly using git, to upload edited pages directly via rsync and synchronization via git.
-</p>
-
-</div>
-
-</div>
-
-</li>
-
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('Editing', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-13
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        Editing
+      </h3>
+      
+      <div id="Editing">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          added a timeline component,<br>but I have to generate a timeline html and paste it as text,<br>then paste into content generation, and the upload to blog.
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item2', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-13
-</time>
-
-<div id="item2" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-Editing
-</h3>
-
-<p class="text-gray-500 mt-1">
-added a timeline component,<br>but I have to generate a timeline html and paste it as text,<br>then paste into content generation, and the upload to blog.
-</p>
-
-</div>
-
-</div>
-
-</li>
-
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('PackingbloginDocker', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-12
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        Packing blog in Docker
+      </h3>
+      
+      <div id="PackingbloginDocker">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          uwsgi + flask -> caddy, gunicorn, flask, docker
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item3', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-12
-</time>
-
-<div id="item3" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-Packing blog in Docker
-</h3>
-
-<p class="text-gray-500 mt-1">
-uwsgi + flask -> caddy, gunicorn, flask, docker
-</p>
-
-</div>
-
-</div>
-
-</li>
-
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('movedallwikipagesintoonerepository', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-12
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        moved all wiki pages into one repository
+      </h3>
+      
+      <div id="movedallwikipagesintoonerepository">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          have been using gitea's wiki page to take notes, which is a life-saver<br>I made a script to pull all wiki pages into one repository, now I have a way to save all my notes.
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item4', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-12
-</time>
-
-<div id="item4" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-moved all wiki pages into one repository
-</h3>
-
-<p class="text-gray-500 mt-1">
-have been using gitea's wiki page to take notes, which is a life-saver<br>I made a script to pull all wiki pages into one repository, now I have a way to save all my notes.
-</p>
-
-</div>
-
-</div>
-
-</li>
-
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('scoopupdatevscode', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-12
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        scoop update vscode
+      </h3>
+      
+      <div id="scoopupdatevscode">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          VS Code was always hanging for two months.
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item5', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-11
-</time>
-
-<div id="item5" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-/root partition is full
-</h3>
-
-<p class="text-gray-500 mt-1">
-pacman -Sc doesnt work anymore<br>I am confused very confused<br>started to move gitea from /etc to /home<br>accidentally deleted all gitea data...then recovered with a previous gitea dump
-</p>
-
-</div>
-
-</div>
-
-</li>
-
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('rootpartitionisfull', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-11
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        /root partition is full
+      </h3>
+      
+      <div id="rootpartitionisfull">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          pacman -Sc doesnt work anymore<br>I am confused very confused<br>started to move gitea from /etc to /home<br>accidentally deleted all gitea data...then recovered with a previous gitea dump
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item6', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-11
-</time>
-
-<div id="item6" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-have another gitea instance, docker
-</h3>
-
-<p class="text-gray-500 mt-1">
-all repositories have a mirror now
-</p>
-
-</div>
-
-</div>
-
-</li>
-
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('haveanothergiteainstancedocker', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-11
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        have another gitea instance, docker
+      </h3>
+      
+      <div id="haveanothergiteainstancedocker">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          all repositories have a mirror now
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item7', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-11
-</time>
-
-<div id="item7" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-Tailscale ip doesnt work
-</h3>
-
-<p class="text-gray-500 mt-1">
-system-wide caddy worked for https://ip <br>but docked caddy didnt work for https://ip<br>I have no clue...
-</p>
-
-</div>
-
-</div>
-
-</li>
-
-<li class="mb-10 ml-6">
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('Tailscaleipdoesntwork', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-11
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        Tailscale ip doesnt work
+      </h3>
+      
+      <div id="Tailscaleipdoesntwork">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          system-wide caddy worked for https://ip <br>but docked caddy didnt work for https://ip<br>I have no clue...
+        </p>
+      </div>
+    </li>
     
-<button onclick="toggleTimeline('item8', this)"
-class="timeline-button"></button>
-
-<div>
-
-<time class="text-sm text-gray-400">
-2026-03-11
-</time>
-
-<div id="item8" class="mt-2">
-
-<h3 class="text-lg font-semibold text-gray-900">
-language tool
-</h3>
-
-<p class="text-gray-500 mt-1">
-trying to use language tool, which helps with spelling but it doesnt work well for grammar checking, also the current setting should be fixed, I am not sure if I am running locally or querying via API.
-</p>
-
-</div>
-
-</div>
-
-</li>
+    <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
+      <button 
+        onclick="toggleTimeline('languagetool', this)" 
+        class="timeline-button">
+      </button>
+      
+      <time class="tw-block tw-mb-1 tw-text-sm tw-font-normal tw-leading-none tw-text-gray-400">
+        2026-03-11
+      </time>
+      
+      <h3 class="tw-text-lg tw-font-semibold tw-text-gray-900 tw-mt-0 tw-mb-1">
+        language tool
+      </h3>
+      
+      <div id="languagetool">
+        <p class="tw-text-base tw-font-normal tw-text-gray-500 tw-m-0">
+          trying to use language tool, which helps with spelling but it doesnt work well for grammar checking, also the current setting should be fixed, I am not sure if I am running locally or querying via API.
+        </p>
+      </div>
+    </li>
 
 """
 
diff --git a/static/css/components/timeline.css b/static/css/components/timeline.css
index c681f1e..f9b84c6 100644
--- a/static/css/components/timeline.css
+++ b/static/css/components/timeline.css
@@ -1,24 +1,49 @@
+/* 1. Reset the LI to ensure no Bootstrap frames/padding interfere */
+li.tw-list-none {
+  border: none !important;
+  background: transparent !important;
+  padding-left: 0 !important; /* Forces alignment control to the Button */
+  margin-left: 1.5rem !important; /* This is the 'tw-ml-6' equivalent */
+}
+
+/* 2. The Precision Dot */
 .timeline-button {
   position: absolute;
-  left: -0.375rem;
+
+  /* MATH: The li has ml-6 (1.5rem). 
+     To center a 0.75rem dot on the line at the edge of that margin:
+     We move it left by (1.5rem + half the dot width). */
+  left: -1.9rem !important;
+  top: 0.25rem;
 
   width: 0.75rem;
   height: 0.75rem;
-
   border-radius: 9999px;
-
   background: #d1d5db;
 
   display: flex;
   align-items: center;
   justify-content: center;
 
-  font-size: 10px;
-  line-height: 1;
-
+  /* This creates the 'gap' around the dot so it looks clean */
+  border: 2px solid white !important;
+  z-index: 10;
   transition: all 0.2s ease;
+  cursor: pointer;
 }
 
+/* 3. Force the Line to be visible and solid */
+ol.tw-border-l-2 {
+  border-left: 2px solid #d1d5db !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+/* Ensure the dot stays put when screen shrinks */
+.tw-relative {
+  position: relative !important;
+}
 /* hover only when expanded */
 .timeline-button:hover:not(.collapsed) {
   background: #6b7280;
diff --git a/templates/base.html b/templates/base.html
index 36c68e5..3064740 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -26,14 +26,12 @@
       rel="stylesheet"
     />
     <script src="https://cdn.tailwindcss.com"></script>
-
     <script>
       tailwind.config = {
         corePlugins: {
-          preflight: false, // Keeps your base blog styles intact
+          preflight: false,
         },
-        // This ensures Tailwind utilities only work inside elements with the 'tailwind-scope' class
-        important: "#timeline-zone",
+        prefix: "tw-", // All Tailwind classes must now start with tw-
       };
     </script>
     <script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
diff --git a/templates/components/timeline.html b/templates/components/timeline.html
index e253b83..224b98d 100644
--- a/templates/components/timeline.html
+++ b/templates/components/timeline.html
@@ -1,8 +1,13 @@
-<div id="timeline-zone">
-  <div class="max-w-3xl mx-auto px-6 py-16">
-    <ol class="relative border-l border-gray-300">
-      <p>hint</p>
-      {{ post.timeline | safe}}
-    </ol>
-  </div>
+<div class="tw-max-w-3xl tw-mx-auto tw-px-6 tw-py-16">
+  <ol
+    class="tw-relative tw-border-l tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-4"
+    style="
+      border-top: none !important;
+      border-right: none !important;
+      border-bottom: none !important;
+      border-left: 1px solid #d1d5db !important;
+    "
+  >
+    {{ post.timeline | safe}}
+  </ol>
 </div>