diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index 23d5eddb9b592ac254616e74b763a55cc0cf420c..ce615cca05b9d0df248683a0a89394134e8b6a14 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -53,7 +53,7 @@ left: 8px !important;
 border-color:  transparent transparent transparent #f6faf6 !important;
 }
 .timeline ol li:nth-child(2n) .moretop{
-top: 30px !important;   
+top: 50px !important;   
 }
 .timeline ol li:nth-child(even) .timeline-item {
     box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
@@ -133,7 +133,7 @@ border-color: transparent transparent transparent white;
   
 /* Layout for meta timeline cards */
 .time-meta{
-    background-color: #f6faf6 !important;
+    
     border-radius: 10px;
 }
 
@@ -213,14 +213,14 @@ button.tabbutton:nth-child(1){
   
 /* Cards */
 .timeline-item {
-    min-width: 100px;
-   /*  display: flex; */
-    justify-content: flex-end;
-    padding-right: 30px;
-    position: relative;
-    margin: 10px 0;
-    width: 50%;
-  }
+  display: flex;
+  flex-direction: column; /* Vertikale Anordnung der Inhalte */
+  height: 250px; /* Höhe des Timeline-Items */
+  position: relative;
+  padding: 15px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  background: white;
+}
   .timeline-item-content {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     border-radius: 5px;
@@ -392,4 +392,44 @@ z-index: 100;
   width: 100%;
   max-height: 400px;
 }  
-  */
\ No newline at end of file
+  */
+
+
+  .hpbuttonrow {
+    display: flex; /* Flex-Layout für die untere Reihe */
+    margin-top: auto; /* Schiebt diese Reihe nach unten */
+    align-items: center; /* Vertikale Zentrierung */
+}
+
+.fillup {
+  flex: 1; /* Nimmt den verfügbaren Platz ein */
+    height: auto; /* Passt die Höhe automatisch an den Inhalt an */
+    overflow: hidden; 
+}
+
+  .timeline-item .row:first-child {
+    flex: 1; /* Füllt den verbleibenden Raum aus */
+    display: flex; /* Flex-Layout aktivieren */
+    align-items: center; /* Vertikale Zentrierung */
+}
+
+/* Untere Reihe */
+.timeline-item .row:last-child {
+    margin-top: auto; /* Schiebt die letzte Reihe nach unten */
+}
+
+.timeline-item {
+  background: rgba(255, 0, 0, 0.1); /* Leicht rötlicher Hintergrund für Debugging */
+}
+
+.fillup {
+  border: 1px solid blue; /* Blauer Rahmen um die Reihen */
+}
+
+.hpbuttonrow {
+  background: rgba(0, 255, 0, 0.1); /* Leicht grüner Hintergrund für Debugging */
+}
+
+.fillup-wrapper{
+  display: flex;
+}
\ No newline at end of file
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 7cd76f97cc6f02cb9b1606aa58c86b570e1ad290..ec334623ca67c86a9907e59056ac76ea4c0a5797 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -10,15 +10,17 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
                 {tag}
             </div>
             
-            <div className="row align-items-center">
-              <div className="col" >
-              <img className="img-round" src={pic}/>
-              </div>
-              <div className="col" >
-                  {title}
+            <div className="fillup-wrapper">
+            <div className="row align-items-center fillup">
+                <div className="col" >
+                <img className="img-round" src={pic} />
+                </div>
+                <div className="col" >
+                    {title}
+                </div>
               </div>
-            </div>
-            <div className="row align-items-center">
+           </div>
+            <div className="row align-items-center hpbuttonrow">
               <div className="col">
                 <p style={{marginTop: "10px"}}>{author}</p>
               </div>
@@ -45,15 +47,17 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
                 {tag}
             </div>
             
-            <div className="row align-items-center">
-              <div className="col" >
-               <img className="img-cube" src={pic} />
-              </div>
-              <div className="col" >
-                  {title}
+           <div className="fillup-wrapper">
+            <div className="row align-items-center fillup">
+                <div className="col" >
+                <img className="img-cube" src={pic} />
+                </div>
+                <div className="col" >
+                    {title}
+                </div>
               </div>
-            </div>
-            <div className="row align-items-center">
+           </div>
+            <div className="row align-items-center hpbuttonrow">
               <div className="col">
                 <p style={{marginTop: "10px"}}>{author}</p>
               </div>