diff --git a/static/css/components/timeline.css b/static/css/components/timeline.css
index 1dff263..7ac54e8 100644
--- a/static/css/components/timeline.css
+++ b/static/css/components/timeline.css
@@ -1,99 +1,77 @@
-/* 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;
-
-  /* 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;
-
-  /* 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 */
+/* 1. CONTAINER & LINE FIX */
 ol.tw-border-l-2 {
-  border-left: 2px solid #d1d5db !important;
-  border-right: none !important;
-  border-top: none !important;
-  border-bottom: none !important;
+  /* Pull the whole timeline left */
+  margin-left: 0.75rem !important;
+  border-left: 2px solid #e2e8f0 !important;
+  padding-left: 0 !important;
 }
 
-/* Ensure the dot stays put when screen shrinks */
-.tw-relative {
+/* 2. ITEM SPACING */
+li.tw-relative {
+  list-style: none !important;
+  /* Reduced margin-left to pull text closer to the line */
+  margin-left: 1.5rem !important;
+  margin-bottom: 3rem !important;
   position: relative !important;
 }
-/* hover only when expanded */
-.timeline-button:hover:not(.collapsed) {
-  background: #6b7280;
-}
 
-/* collapsed state */
-.timeline-button.collapsed {
-  background: transparent !important;
-  color: #6b7280;
-}
-/* 1. Main Text Size - Matching standard blog paragraphs */
-#Tailscaleipdoesntwork p,
-.tw-text-base {
-  font-size: 1.5rem !important; /* ~18px */
-  line-height: 1.7 !important;
-  color: #333 !important;
-  margin-top: 8px !important;
-}
-
-/* 2. Heading Size */
-#Tailscaleipdoesntwork h3,
-.tw-text-lg {
-  font-size: 1.5rem !important; /* ~24px */
-  font-weight: 700 !important;
-  margin-bottom: 4px !important;
-}
-
-/* 3. Date Size */
-time,
-.tw-text-sm {
-  font-size: 0.95rem !important;
-  font-weight: 600 !important;
-  color: #6b7280 !important;
-}
-
-/* 4. The Alignment "Math" */
-/* If <li> has tw-ml-6 (1.5rem), the dot needs to move left exactly that much */
+/* 3. THE DOT (The "Timeline Button") */
 .timeline-button {
-  width: 12px !important;
-  height: 12px !important;
   position: absolute;
-  left: -1.92rem !important; /* Adjust this slightly if the dot isn't centered on the line */
+  /* Centering the dot exactly on the 2px line */
+  left: -1.95rem !important;
   top: 0.5rem;
+
+  width: 14px !important;
+  height: 14px !important;
   background: #cbd5e1;
   border: 3px solid white !important;
   border-radius: 50%;
   z-index: 10;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* 5. The Vertical Line */
-ol.tw-border-l-2 {
-  border-left: 2px solid #e2e8f0 !important;
+.timeline-button:hover {
+  background: #6b7280;
+}
+
+/* 4. TYPOGRAPHY - BOLD & BLOG-SIZED */
+/* Heading - Match "Project Timeline" style but smaller */
+.tw-text-lg,
+li h3 {
+  font-size: 1.5rem !important;
+  font-weight: 800 !important; /* Extra bold like your standalone */
+  color: #111827 !important;
+  margin: 0 0 8px 0 !important;
+  line-height: 1.2 !important;
+  display: block !important;
+}
+
+/* Body Text - Matching normal blog paragraph size */
+.tw-text-base,
+li p {
+  font-size: 1.25rem !important; /* Increased to match main blog text */
+  line-height: 1.6 !important;
+  color: #4b5563 !important;
+  margin: 0 !important;
+}
+
+/* Date/Time */
+.tw-text-sm,
+time {
+  font-size: 1rem !important;
+  font-weight: 500 !important;
+  color: #9ca3af !important;
+  margin-bottom: 4px !important;
+  display: block !important;
+}
+
+/* 5. BOOTSTRAP RESET */
+/* Prevents Bootstrap from adding dots or padding to our timeline list */
+li.tw-list-none::before {
+  content: none !important;
 }