diff --git a/internal/handler/handler.go b/internal/handler/handler.go
index 80f2f78..451ac74 100644
--- a/internal/handler/handler.go
+++ b/internal/handler/handler.go
@@ -1,6 +1,8 @@
 package handler
 
 import (
+	"time"
+
 	"github.com/labstack/echo/v4"
 	"github.com/lorenzhohermuth/portfolio/view/component"
 	"github.com/lorenzhohermuth/portfolio/view/page"
@@ -16,7 +18,16 @@ func(h Homehandler) HandleUserShow(ctx echo.Context) error {
 		{"/static/flower.jpeg", "This is a Flower" , "I like Flowers"},
 		{"/static/paris.jpg", "This is the Eiffel Tower" , "I not like Franc"},
 	}
-	return render(ctx, page.ShowHome(entrys, h.Index))
+
+	events := []component.Event{
+		{time.Now(), time.Now(), "Title 1"},
+		{time.Now(), time.Now(), "Title 2"},
+		{time.Now(), time.Now(), "Title 3"},
+		{time.Now(), time.Now(), "Title 4"},
+		{time.Now(), time.Now(), "Title 5"},
+	}
+	
+	return render(ctx, page.ShowHome(entrys, h.Index, events))
 }
 
 type HtmxCarouselHandler struct {
diff --git a/view/component/Timeline.templ b/view/component/Timeline.templ
new file mode 100644
index 0000000..27dcc0d
--- /dev/null
+++ b/view/component/Timeline.templ
@@ -0,0 +1,26 @@
+package component
+
+import "time"
+
+type Event struct {
+	DateStart time.Time
+	DateEnd time.Time
+	Title string
+}
+
+templ Timeline(evts []Event) {
+	<div class="text-white mr-4">
+		for i, v := range evts {
+			<div class="flex items-center">
+				<div class="h-1 w-3 m-0 mr-4 rounded-full bg-white"/>
+				<div>
+					<p class="m-0 mb-1">{v.Title}</p>
+					<p class="m-0 text-sm">{v.DateEnd.Format("02 January 2006")} - {v.DateEnd.Format("02 January 2006")}</p>
+				</div>
+			</div>
+			if i + 1 < len(evts) {
+				<div class="h-10 w-1 rounded-full bg-white ml-1"/>
+			}
+		}
+	</div>
+}
diff --git a/view/component/Timeline_templ.go b/view/component/Timeline_templ.go
new file mode 100644
index 0000000..a84f366
--- /dev/null
+++ b/view/component/Timeline_templ.go
@@ -0,0 +1,98 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.650
+package component
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "time"
+
+type Event struct {
+	DateStart time.Time
+	DateEnd   time.Time
+	Title     string
+}
+
+func Timeline(evts []Event) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"text-white mr-4\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i, v := range evts {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex items-center\"><div class=\"h-1 w-3 m-0 mr-4 rounded-full bg-white\"></div><div><p class=\"m-0 mb-1\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var2 string
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(v.Title)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/Timeline.templ`, Line: 17, Col: 33}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><p class=\"m-0 text-sm\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(v.DateEnd.Format("02 January 2006"))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/Timeline.templ`, Line: 18, Col: 64}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" - ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.DateEnd.Format("02 January 2006"))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/Timeline.templ`, Line: 18, Col: 104}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if i+1 < len(evts) {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"h-10 w-1 rounded-full bg-white ml-1\"></div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
diff --git a/view/page/home.templ b/view/page/home.templ
index 1b503fa..b428c81 100644
--- a/view/page/home.templ
+++ b/view/page/home.templ
@@ -3,7 +3,7 @@ package page
 import "github.com/lorenzhohermuth/portfolio/view/layout"
 import "github.com/lorenzhohermuth/portfolio/view/component"
 
-templ ShowHome(arr []component.CarouselEntry, index int) {
+templ ShowHome(arr []component.CarouselEntry, index int, events []component.Event) {
 	@layout.Base(){
 		<div class="bg-[#cdb4f6] pb-8 pt-1">
 			<div class="text-white py-2 pr-3 pl-6 bg-[#6266ec] my-4 mr-4 rounded-r-4">
@@ -70,11 +70,11 @@ templ ShowHome(arr []component.CarouselEntry, index int) {
 			</div>
 		</div>
 
-		<div class="h-80 bg-[#fee7c5]">
+		<div class="bg-[#fee7c5]">
 			@component.Banner("Work", "", "#1733d2", "#ff5cdb")
 			<div class="p-3 h-full">
-				<div class="bg-[#1733d2] h-full w-full rounded-8 flex justify-center items-center">
-					Work
+				<div class="bg-[#1733d2] rounded-8 flex justify-center items-center py-8">
+					@component.Timeline(events)
 				</div>
 			</div>
 		</div>
diff --git a/view/page/home_templ.go b/view/page/home_templ.go
index 40f31fc..5a18fcc 100644
--- a/view/page/home_templ.go
+++ b/view/page/home_templ.go
@@ -13,7 +13,7 @@ import "bytes"
 import "github.com/lorenzhohermuth/portfolio/view/layout"
 import "github.com/lorenzhohermuth/portfolio/view/component"
 
-func ShowHome(arr []component.CarouselEntry, index int) templ.Component {
+func ShowHome(arr []component.CarouselEntry, index int, events []component.Event) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -56,7 +56,7 @@ func ShowHome(arr []component.CarouselEntry, index int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"h-80 bg-[#fee7c5]\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"bg-[#fee7c5]\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -64,7 +64,15 @@ func ShowHome(arr []component.CarouselEntry, index int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"p-3 h-full\"><div class=\"bg-[#1733d2] h-full w-full rounded-8 flex justify-center items-center\">Work</div></div></div>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"p-3 h-full\"><div class=\"bg-[#1733d2] rounded-8 flex justify-center items-center py-8\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = component.Timeline(events).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}