diff --git a/assets/js/main.js b/assets/js/main.js
index 9b6c2c5..56e07ca 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -49,7 +49,8 @@
     const modal = document.querySelector(`#${target}`);
     if (modal) {
       btn.addEventListener("click", (e) => {
-        toggle_modal(modal, true);
+        if (e.target.tagName !== 'A')
+          toggle_modal(modal, true);
       });
     }
   });
@@ -77,10 +78,36 @@
   document.addEventListener("keydown", (e) => {
     if (e.key === "Escape") {
       var modal_id = body.getAttribute("modal");
-      if(modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false);
+      if (modal_id) toggle_modal(document.querySelector(`#${modal_id}`), false);
     }
   });
 
+  // timelines
+  // ----------------------------------------
+  const updateTimeline = (timeline) => {
+    const day_target = timeline.getAttribute("data-day-target");
+    timeline.querySelectorAll(".day-events:not(.hidden)").forEach((day_events) => { day_events.classList.toggle("hidden", true); });
+    timeline.querySelector(`[data-day-title="${day_target}"]`).classList.toggle("hidden", false);
+    timeline.querySelectorAll(`.day_listing.active`).forEach((listing) => {
+      listing.classList.toggle("inactive", true);
+      listing.classList.toggle("active", false);
+    });
+    var new_active = timeline.querySelector(`.day_listing[data-day-target="${day_target}"]`);
+    new_active.classList.toggle("active", true);
+    new_active.classList.toggle("inactive", false);
+  };
+
+  document.querySelectorAll(".timeline_grid_container").forEach((timeline) => {
+    const days = timeline.querySelector(".day-listing-container");
+    days.addEventListener("click", (e) => {
+      const day_target = e.target.getAttribute("data-day-target");
+      if (day_target) {
+        timeline.setAttribute("data-day-target", day_target);
+        updateTimeline(timeline);
+      }
+    });
+  });
+
   // Swipers
   // ----------------------------------------
   const swipers = document.querySelectorAll(".swiper-slider");
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index f29d390..73b9f5c 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -50,16 +50,26 @@
 }
 
 .testimonial a,
-.img_grid_container a {
+.img_grid_container a,
+.timeline_grid_container a {
     color: var(--meetups-color) !important;
     text-decoration: none;
 }
 
 .testimonial a:hover,
-.img_grid_container a:hover {
+.img_grid_container a:hover,
+.timeline_grid_container a {
     text-decoration: underline;
 }
 
+// .day_listing.active {
+
+// }
+
+.day_listing.inactive {
+    color: rgb(163, 163, 163);
+}
+
 .modal-bg a {
     color: var(--meetups-color) !important;
     text-decoration: none;
diff --git a/content/english/seattle/index.md b/content/english/seattle/index.md
index 8fcb980..912e004 100644
--- a/content/english/seattle/index.md
+++ b/content/english/seattle/index.md
@@ -9,7 +9,7 @@ banner:
   title: "<span class='seattle-color'>Handmade Seattle 2024</span>"
   content: "We are the largest indie conferences for low-level programmers.<br> Proud to be __Fully Hybrid__.<br>"
   content_bottom: "**Seattle Center**<br><span class='text-small'>Nesholm Family Lecture Hall</span><br><br><span class='underline'>**Nov 20th - 22nd, 2024**</span><br>Private Hangouts on Friday, Nov 22nd"
-  content_bottom_class: "mt-20 text-white"
+  content_bottom_class: "mt-20 mb-20 text-white"
   section_class: "mb-0 pb-0"
   bg_img:
     parallax: false
@@ -19,7 +19,7 @@ banner:
   hide_banner_img: true
   transition:
     end: "/images/transition2.svg"
-    end_class: "mt-20 transform -scale-y-100 -scale-x-100"
+    end_class: "transform -scale-y-100 -scale-x-100"
     end_color: "#fff"
     end_dark: "/images/transition2.svg"
     end_dark_color: "#150e31"
@@ -57,6 +57,120 @@ features:
       end_style: "mask-size: cover;height:150px;"
       end_dark: "/images/transition3.svg"
       end_dark_color: "#150e31"
+    timeline:
+      enable: false
+      date_class: ""
+      event_class: ""
+      timeline_class: "mb-20 mt-12"
+      event_img_class: ""
+      time_class: "text-right text-slate-200"
+      event_title_class: "dark:text-white text-xl"
+      event_subtitle_class: "text-lg text-slate-200"
+      day_listing_class: "text-2xl text-white no-decoration hover:meetups-color hover:cursor-pointer hover:underline"
+      day_listing_inactive_class: "text-gray"
+      top_text: ""
+      top_text_class: "mb-12 text-center"
+      bottom_text: "All times in Pacific Time, UTC-8:00 timezone."
+      bottom_text_class: "text-center mt-8 text-slate-300"
+      day_date_class: "text-center text-white text-xl mb-4 underline"
+      default_day: "Day 1"
+      days:
+      - title: "Day 1"
+        date: "Nov 20th, 2024"
+        title_class: "text-dark dark:text-white"
+        events:
+        - title: "Sign In"
+          time: "9:30 AM"
+          subtitle: "Show up and sign in!"
+          modal_target: ""
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "game engine design and the dark arts of data plumbing"
+          time: "10:30 AM"
+          subtitle: "Devon Hall"
+          title_class: ""
+          modal_target: ""
+          subtitle_class: ""
+          link: ""
+        - title: "Talk about why LLVM is bad"
+          time: "11:30 AM"
+          subtitle: "Negate"
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "Lunch"
+          time: "12:30 PM"
+          subtitle: ""
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+      - title: "Day 2"
+        date: "Nov 21st, 2024"
+        title_class: "text-dark dark:text-white"
+        top_text: ""
+        top_text_class: "dark:text-white"
+        bottom_text: ""
+        bottom_text_class: ""
+        events:
+        - title: "Yet another thing"
+          time: "9:30 AM"
+          subtitle: "find a friend"
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "listen to a song with a super long title"
+          time: "10:30 AM"
+          subtitle: "sign some documents in a long title"
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "Help your friend fix his vim config"
+          time: "11:30 AM"
+          subtitle: "because not everyone knows vimscript"
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "Lunch"
+          time: "12:30 PM"
+          subtitle: ""
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+      - title: "Day 3"
+        date: "Nov 22nd, 2024 (Hangouts)"
+        title_class: "text-dark dark:text-white"
+        top_text: ""
+        top_text_class: "dark:text-white"
+        bottom_text: ""
+        bottom_text_class: ""
+        events:
+        - title: "MoPop Mueseum"
+          time: "9:30 AM"
+          subtitle: ""
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "Flatstick Pub"
+          time: "1:30 PM"
+          subtitle: ""
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "After Party"
+          time: "7:30 PM"
+          subtitle: "@ a location"
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+        - title: "Devon"
+          time: "9:30 AM"
+          subtitle: "was here"
+          title_class: ""
+          subtitle_class: ""
+          link: ""
+
+
     img_grid:
       title: ""
       title_class: "text-center"
diff --git a/layouts/partials/components/features.html b/layouts/partials/components/features.html
index c3fe3d1..4088983 100644
--- a/layouts/partials/components/features.html
+++ b/layouts/partials/components/features.html
@@ -40,6 +40,12 @@
               {{ partial "image" (dict "Src" .image "Alt" "Banner" "Class" "w-1/3 h-1/3" ) }}
             </figure>
           {{ end }}
+          <!-- timeline -->
+          {{ if .timeline }}
+          {{ partial "components/timeline.html" . }}
+          {{ end }}
+          <!-- timeline -->
+
           <h2 class="{{ .title_class }}">
             {{ .title | markdownify }}
           </h2>
@@ -72,18 +78,18 @@
         <!-- testimonials -->
         {{ if .testimonials }}
         {{ partial "components/testimonials.html" . }}
-        {{ end }}
+        {{ end }} 
         <!-- testimonials -->
         <!-- img_grid  -->
         {{ if .img_grid }}
         {{ partial "components/img_grid.html" . }}
         {{ end }}
-
+        <!-- /img_grid  -->
+        <!-- card_grid -->
         {{ if .card_grid }}
         {{ partial "components/card_grid.html" . }}
         {{ end }}
-
-        <!-- img_grid -->
+        <!-- card_grid -->
 
         <p class="mb-8 text-lg about-content">
           {{ .content | markdownify }}
diff --git a/layouts/partials/components/timeline.html b/layouts/partials/components/timeline.html
new file mode 100644
index 0000000..fb90cba
--- /dev/null
+++ b/layouts/partials/components/timeline.html
@@ -0,0 +1,61 @@
+{{ if .timeline }}
+{{ if .timeline.enable }}
+{{ $default_day := .timeline.default_day }}
+<div
+  class="container relative mx-auto px-4 {{ .timeline.section_class }} timeline_grid_container {{ .timeline.timeline_class }}"
+  data-day-target="{{ .timeline.default_day }}">
+  {{ if .timeline.title }}<p class="{{ .timeline.title_class }}">{{ .timeline.title }}</p>{{ end }}
+  {{ if .timeline.top_text }}<p class="{{ .timeline.top_text_class }}">{{ .timeline.top_text | markdownify }}</p>{{ end }}
+  <div class="flex flex-wrap justify-center mx-auto columns-1 max-w-3xl min-w-32">
+    {{ $event_class := .timeline.event_title_class }}
+    {{ $event_title_class := .timeline.event_title_class }}
+    {{ $event_subtitle_class := .timeline.event_subtitle_class }}
+    {{ $event_time_class := .timeline.time_class }}
+    {{ $event_img_class := .timeline.img_class }}
+    {{ $day_date_class := .timeline.day_date_class }}
+
+    <div class="day-listing-container flex justify-center items-center w-full mb-8">
+      <div class="space-x-4">
+      {{ $day_listing_class := .timeline.day_listing_class }}
+      {{ $day_listing_inactive_class := .timeline.day_listing_inactive_class }}
+      {{ range $i, $day := .timeline.days }}
+      <span
+        class="day_listing {{ $day.listing_class }} {{ $day_listing_class }} {{ if ne $day.title $default_day }} inactive {{ else }} active {{ end }}"
+        data-day-target="{{ $day.title }}">{{ $day.title  }}</span>
+      {{ end }}
+      </div>
+    </div>
+
+    <div class="day-container w-full">
+      {{ range $day := .timeline.days }}
+      <div class="day-events w-full {{ if ne $day.title $default_day }} hidden {{ end }}" data-day-title="{{ $day.title }}">
+        <p class="{{ $day_date_class }} {{ $day.date_class }}">{{ $day.date }}</p>
+        {{ range $event := $day.events }}
+        <div class=" {{ $event_class }} {{ $event.class }} p-2 row col-12">
+          <div class="col-5">
+            <p class="{{ $event_time_class }} {{ $event.time_class}} text-right">{{ $event.time }}</p>
+          </div>
+          <div class="col-7" {{ if $event.modal_target }} data-modal-show="{{ $event.modal_target }}" {{ end }}>
+            {{ if $event.link }}
+            <a href="{{ $event.link }}">
+              {{ end }}
+              <p class="{{ $event_title_class}} {{ $event.title_class }}">
+                {{ $event.title | markdownify }}
+              </p>
+              <p class="{{ $event_subtitle_class}} {{ $event.subtitle_class}}">
+                {{ $event.subtitle | markdownify }}
+              </p>
+              {{ if $event.link }}
+            </a>
+            {{ end }}
+          </div>
+        </div>
+        {{ end }}
+      </div>
+      {{ end }}
+    </div>
+  </div>
+  <p class="{{ .timeline.bottom_text_class}}">{{ .timeline.bottom_text | markdownify }}</p>
+</div>
+{{ end }}
+{{ end }}
\ No newline at end of file