diff --git a/todoqueue_frontend/src/components/tasks/Tasks.css b/todoqueue_frontend/src/components/tasks/Tasks.css
index c38402e..cc132b7 100644
--- a/todoqueue_frontend/src/components/tasks/Tasks.css
+++ b/todoqueue_frontend/src/components/tasks/Tasks.css
@@ -78,7 +78,7 @@
     gap: 16px;
     overflow-x: auto;
     overflow-y: visible;
-    white-space: nowrap;
+    /* white-space: nowrap; */
     flex-wrap: nowrap;
     position: absolute;
     /* Change from relative to absolute */
@@ -95,7 +95,7 @@
     background: #f9f9f9;
     width: 170px;
     min-width: 170px;
-    height: 100px;
+    /* height: 100px; */
     margin: 10px;
     border: 2px solid #e0e0e0;
     cursor: pointer;
@@ -123,8 +123,7 @@
 }
 
 .task-wrapper::after {
-    content: "";
-    position: absolute;
+    position: relative;
     top: 0;
     bottom: 0;
     right: 0;
@@ -138,8 +137,6 @@
         /* Align tasks vertically */
         align-items: center;
         /* Center tasks horizontally */
-        gap: 120px;
-        /* Spacing between tasks */
         bottom: 100px;
         /* Lower bottom since the scores disappear */
     }
@@ -155,6 +152,8 @@
         /* Initial position of the task cards */
         bottom: auto;
         /* Reset the bottom property */
+        position: relative;
+        /* Make spacing work properly */
         transition: left 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
         /* Transition effect for the left property */
     }
diff --git a/todoqueue_frontend/src/components/tasks/Tasks.js b/todoqueue_frontend/src/components/tasks/Tasks.js
index 1394343..ffdc72c 100644
--- a/todoqueue_frontend/src/components/tasks/Tasks.js
+++ b/todoqueue_frontend/src/components/tasks/Tasks.js
@@ -342,7 +342,10 @@ const Tasks = ({ selectedHousehold, showSelectedHouseholdSelector, setShowHouseh
                                 style={
                                     windowWidth < 800
                                         ? { left: `calc(${task.staleness} * (100% - 200px))` }
-                                        : { bottom: `calc(${(task.staleness) * 100}% - ${task.staleness * 120}px)` }
+                                        : {
+                                            bottom: `calc(${(task.staleness) * 100}%)`,
+                                            transform: `translateY(calc(${task.staleness * 100}% + ${task.staleness * 30}px))`
+                                        }
                                 }
                             >
                                 <div className="task-content">
@@ -358,7 +361,9 @@ const Tasks = ({ selectedHousehold, showSelectedHouseholdSelector, setShowHouseh
                                 </div>
                             </div>
                         </div>
-                    ))}
+                    ))
+                }
+
 
                 <div className={`empty-state ${noTasks && selectedHousehold ? "show" : "hide"}`} >
                     <h3>You have no tasks!</h3>