diff --git a/src/components/timeline/Timeline.tsx b/src/components/timeline/Timeline.tsx
index 8176ee1..9cc4a03 100644
--- a/src/components/timeline/Timeline.tsx
+++ b/src/components/timeline/Timeline.tsx
@@ -9,7 +9,7 @@ function Timeline({ children } : TimelapseProps) {
 
   return (
     <div className='timeline'>
-      <ul className='timeline'>
+      <ul>
         { children }
       </ul>
     </div>
diff --git a/src/components/timeline/TimelineElement.scss b/src/components/timeline/TimelineElement.scss
index 732d772..806e60a 100644
--- a/src/components/timeline/TimelineElement.scss
+++ b/src/components/timeline/TimelineElement.scss
@@ -33,8 +33,12 @@
             }
     
             & > summary {
-                @apply block select-none cursor-pointer outline-none mb-0 font-semibold;
+                @apply block select-none cursor-pointer outline-none p-5 font-semibold;
+                
+                // BEGIN TRANSITION
+                @apply mb-0;
                 transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
+                // END TRANSITION
     
                 &:hover {
                     @apply bg-[#f8f8f8];
@@ -43,6 +47,7 @@
     
             &[open] {
                 & > summary {
+                    @apply mb-5; // TRANSITION
                     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                 }
             }