diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 87b9db8..3f5d19d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -175,6 +175,7 @@ label {
   grid-template-columns: 248px minmax(0, 1fr);
   grid-template-rows: 72px minmax(0, 1fr);
   min-height: 100vh;
+  transition: grid-template-columns 260ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .app-shell.sidebar-collapsed {
@@ -255,6 +256,10 @@ label {
   padding: 16px;
   position: sticky;
   top: 72px;
+  transition:
+    background-color 220ms ease,
+    border-color 220ms ease,
+    padding 260ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .sidebar-header {
@@ -268,6 +273,17 @@ label {
   text-transform: uppercase;
 }
 
+.sidebar-header span {
+  max-width: 120px;
+  opacity: 1;
+  overflow: hidden;
+  transition:
+    max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 160ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  white-space: nowrap;
+}
+
 .sidebar nav {
   display: grid;
   gap: 8px;
@@ -283,10 +299,26 @@ label {
   gap: 10px;
   min-height: 42px;
   padding: 10px 12px;
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease,
+    gap 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    justify-content 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    padding 240ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .nav-item span {
+  max-width: 140px;
   min-width: 0;
+  opacity: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 160ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  white-space: nowrap;
 }
 
 .nav-item.active {
@@ -301,10 +333,13 @@ label {
 
 .sidebar-collapsed .sidebar-header span,
 .sidebar-collapsed .nav-item span {
-  display: none;
+  max-width: 0;
+  opacity: 0;
+  transform: translateX(-4px);
 }
 
 .sidebar-collapsed .nav-item {
+  gap: 0;
   justify-content: center;
   padding: 10px;
 }
@@ -313,6 +348,14 @@ label {
   margin: 0 auto;
 }
 
+.collapse-button {
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    margin 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
 .content {
   min-width: 0;
   padding: 20px;
@@ -707,6 +750,10 @@ label {
 .metric-track i {
   background: var(--accent);
   display: block;
+  transition:
+    height 520ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 520ms cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 180ms ease;
 }
 
 .histogram-column i {
@@ -777,6 +824,9 @@ label {
   border-radius: 999px;
   display: block;
   min-width: 6px;
+  transition:
+    width 520ms cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 180ms ease;
 }
 
 .status-stack i.queued,
@@ -797,6 +847,13 @@ label {
   border-radius: 5px;
   display: block;
   height: 32px;
+  transition:
+    background-color 240ms ease,
+    transform 220ms ease;
+}
+
+.job-tick:hover {
+  transform: translateY(-2px);
 }
 
 .job-tick.running {