diff --git a/html/hot_people_who_eat_croissants_are_dangerous.tsx b/html/hot_people_who_eat_croissants_are_dangerous.tsx
index 970413a..7dd8b68 100644
--- a/html/hot_people_who_eat_croissants_are_dangerous.tsx
+++ b/html/hot_people_who_eat_croissants_are_dangerous.tsx
@@ -5,7 +5,7 @@ import { Component } from "./jsx/jsx-runtime.ts";
 const peopleify = (...people: string[]): string[] =>
     people.map(p => `${p} people`);
 
-const animation_length = (num_items: number): number => num_items / 5;
+const animation_length = (num_items: number): number => /*num_items / 5*/ 3;
 
 const wheel_style = (num_items: number): string =>
     `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
@@ -73,6 +73,28 @@ const Author: Component = () => (
     </div>
 );
 
+const Info: Component = () => (
+    <div class="info">
+        <span class="time">10:02 PM</span> ·{" "}
+        <span class="date">Feb 20, 2021</span> ·{" "}
+        <span class="device">Twitter for iPhone</span>
+    </div>
+);
+
+const Stats: Component = () => (
+    <div class="stats">
+        <span class="retweets">
+            <span class="stat">3,228</span> Retweets
+        </span>
+        <span class="quote-tweets">
+            <span class="stat">803</span> Quote Tweets
+        </span>
+        <span class="likes">
+            <span class="stat">39.3K</span> Likes
+        </span>
+    </div>
+);
+
 // might want to have the final item be seperate
 // turned out to be unnecessary
 debug_render(
@@ -127,5 +149,10 @@ debug_render(
                 "dangerous",
             ]}
         />
+        <Info />
+        <hr />
+        <Stats />
+        <hr />
+        <div class="bottom"></div>
     </Main>
 );