diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index f0080f05163fc01b2b02e4d2e421fccd43eb743f..f0aa7b46e03252cddb5dd2c6ef7aa7422f7a71ba 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -178,7 +178,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
 .Industry, button.tabbutton:nth-child(5){
   background-color: var(--mediumpurple);
 }
-.Activist, .Milestone{
+.Activist, .Milestone, .Education, .Outreach{
   background-color: var(--igemlightgreen) !important;
 }
 
@@ -374,4 +374,6 @@ display: flex;
 .timeline-item .img-cube{
   height: 120px;
   max-height: 13vh;
+  object-fit: cover !important;
+
 }
\ No newline at end of file
diff --git a/src/components/HP-timeline.tsx b/src/components/HP-timeline.tsx
index f8b2a64586ee5b6c12cd33d5cd147cf60726c8dd..a7ebda54eb51b9a236bd68722b25cbb0789a16a3 100644
--- a/src/components/HP-timeline.tsx
+++ b/src/components/HP-timeline.tsx
@@ -46,6 +46,16 @@ export function HPTimeline(){
       node: <TimeHori tab="Milestone" ></TimeHori>,
       buttonname: "Milestones", 
       cssname: "Milestone"
+    },
+    { 
+      node: <TimeHori tab="Education" ></TimeHori>,
+      buttonname: "Education", 
+      cssname: "Education"
+    },
+    { 
+      node: <TimeHori tab="Outreach" ></TimeHori>,
+      buttonname: "Outreach", 
+      cssname: "Outreach"
     }
   ]