diff --git a/apps/web/src/lib/assets/delay-icon.svg b/apps/web/src/lib/assets/delay-icon.svg
new file mode 100644
index 0000000..7888f41
--- /dev/null
+++ b/apps/web/src/lib/assets/delay-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 100.6" style="enable-background:new 0 0 122.88 100.6" xml:space="preserve"><style type="text/css">.st0{fill:#272727;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D8453E;}</style><g><path class="st0" d="M72.58,0c6.8,0,13.3,1.36,19.23,3.81c6.16,2.55,11.7,6.29,16.33,10.92l0,0c4.63,4.63,8.37,10.17,10.92,16.34 c2.46,5.93,3.81,12.43,3.81,19.23c0,6.8-1.36,13.3-3.81,19.23c-2.55,6.16-6.29,11.7-10.92,16.33l0,0 c-4.63,4.63-10.17,8.37-16.34,10.92c-5.93,2.46-12.43,3.81-19.23,3.81c-6.8,0-13.3-1.36-19.23-3.81 c-6.15-2.55-11.69-6.28-16.33-10.92l-0.01-0.01c-4.64-4.64-8.37-10.17-10.92-16.33c-0.79-1.91-1.47-3.87-2.02-5.89 c1.05,0.1,2.12,0.15,3.2,0.15c2.05,0,4.05-0.19,6-0.54c0.32,0.97,0.67,1.93,1.06,2.87c2.09,5.05,5.17,9.6,8.99,13.43 c3.82,3.82,8.38,6.9,13.43,8.99c4.87,2.02,10.21,3.13,15.83,3.13c5.62,0,10.96-1.11,15.83-3.13c5.05-2.09,9.6-5.17,13.43-8.99 c3.82-3.82,6.9-8.38,8.99-13.43c2.02-4.87,3.13-10.21,3.13-15.83c0-5.62-1.11-10.96-3.13-15.83c-2.09-5.05-5.17-9.6-8.99-13.43 c-3.82-3.82-8.38-6.9-13.43-8.99c-4.87-2.02-10.21-3.13-15.83-3.13c-5.62,0-10.96,1.11-15.83,3.13c-0.44,0.18-0.87,0.37-1.3,0.56 c-1.65-2.61-3.66-4.97-5.95-7.02c1.25-0.65,2.53-1.24,3.84-1.79C59.28,1.36,65.78,0,72.58,0L72.58,0z M66.8,26.39 c0-1.23,0.5-2.35,1.31-3.16c0.81-0.81,1.93-1.31,3.16-1.31c1.23,0,2.35,0.5,3.16,1.31c0.81,0.81,1.31,1.93,1.31,3.16v23.47 l17.54,10.4c1.05,0.62,1.76,1.62,2.05,2.73c0.28,1.1,0.15,2.31-0.47,3.37l0,0.01l0,0c-0.62,1.05-1.62,1.76-2.73,2.05 c-1.1,0.28-2.31,0.15-3.37-0.47l-0.01,0l0,0L69.1,56.29c-0.67-0.38-1.24-0.92-1.64-1.57c-0.42-0.68-0.66-1.48-0.66-2.32V26.39 L66.8,26.39z"/><path class="st1" d="M27.27,3.18c15.06,0,27.27,12.21,27.27,27.27c0,15.06-12.21,27.27-27.27,27.27C12.21,57.73,0,45.52,0,30.45 C0,15.39,12.21,3.18,27.27,3.18L27.27,3.18z M24.35,41.34h5.82v5.16h-5.82V41.34L24.35,41.34L24.35,41.34z M30.17,37.77h-5.82 c-0.58-7.07-1.8-11.56-1.8-18.63c0-2.61,2.12-4.72,4.72-4.72c2.61,0,4.72,2.12,4.72,4.72C32,26.2,30.76,30.7,30.17,37.77 L30.17,37.77L30.17,37.77L30.17,37.77z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/edit-list-icon.svg b/apps/web/src/lib/assets/edit-list-icon.svg
new file mode 100644
index 0000000..56d9fc0
--- /dev/null
+++ b/apps/web/src/lib/assets/edit-list-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.86 122.88" style="enable-background:new 0 0 106.86 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M39.62,64.58c-1.46,0-2.64-1.41-2.64-3.14c0-1.74,1.18-3.14,2.64-3.14h34.89c1.46,0,2.64,1.41,2.64,3.14 c0,1.74-1.18,3.14-2.64,3.14H39.62L39.62,64.58z M46.77,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H7.33 c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.83,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18v50.14c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.31-0.72c-0.19-0.19-0.44-0.31-0.72-0.31H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.72c0.19,0.19,0.45,0.31,0.73,0.31H46.77L46.77,116.58z M98.7,74.34c-0.51-0.49-1.1-0.72-1.78-0.71 c-0.68,0.01-1.26,0.27-1.74,0.78l-3.91,4.07l10.97,10.59l3.95-4.11c0.47-0.48,0.67-1.1,0.66-1.78c-0.01-0.67-0.25-1.28-0.73-1.74 L98.7,74.34L98.7,74.34z M78.21,114.01c-1.45,0.46-2.89,0.94-4.33,1.41c-1.45,0.48-2.89,0.97-4.33,1.45 c-3.41,1.12-5.32,1.74-5.72,1.85c-0.39,0.12-0.16-1.48,0.7-4.81l2.71-10.45l0,0l20.55-21.38l10.96,10.55L78.21,114.01L78.21,114.01 z M39.62,86.95c-1.46,0-2.65-1.43-2.65-3.19c0-1.76,1.19-3.19,2.65-3.19h17.19c1.46,0,2.65,1.43,2.65,3.19 c0,1.76-1.19,3.19-2.65,3.19H39.62L39.62,86.95z M39.62,42.26c-1.46,0-2.64-1.41-2.64-3.14c0-1.74,1.18-3.14,2.64-3.14h34.89 c1.46,0,2.64,1.41,2.64,3.14c0,1.74-1.18,3.14-2.64,3.14H39.62L39.62,42.26z M24.48,79.46c2.06,0,3.72,1.67,3.72,3.72 c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72C20.76,81.13,22.43,79.46,24.48,79.46L24.48,79.46z M24.48,57.44 c2.06,0,3.72,1.67,3.72,3.72c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72C20.76,59.11,22.43,57.44,24.48,57.44 L24.48,57.44z M24.48,35.42c2.06,0,3.72,1.67,3.72,3.72c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72 C20.76,37.08,22.43,35.42,24.48,35.42L24.48,35.42z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/emergency-exit-icon.svg b/apps/web/src/lib/assets/emergency-exit-icon.svg
new file mode 100644
index 0000000..a9e69a8
--- /dev/null
+++ b/apps/web/src/lib/assets/emergency-exit-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.01 122.88"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>emergency-exit</title><path class="cls-1" d="M.5,0H15a.51.51,0,0,1,.5.5V83.38L35.16,82h.22l.24,0c2.07-.14,3.65-.26,4.73-1.23l1.86-2.17a1.12,1.12,0,0,1,1.49-.18l9.35,6.28a1.15,1.15,0,0,1,.49,1c0,.55-.19.7-.61,1.08A11.28,11.28,0,0,0,51.78,88a27.27,27.27,0,0,1-3,3.1,15.84,15.84,0,0,1-3.68,2.45c-2.8,1.36-5.45,1.54-8.59,1.76l-.24,0-.21,0L15.5,96.77v25.61a.52.52,0,0,1-.5.5H.5a.51.51,0,0,1-.5-.5V.5A.5.5,0,0,1,.5,0ZM46,59.91l9-19.12-.89-.25a12.43,12.43,0,0,0-4.77-.82c-1.9.28-3.68,1.42-5.67,2.7-.83.53-1.69,1.09-2.62,1.63-.7.33-1.51.86-2.19,1.25l-8.7,5a1.11,1.11,0,0,1-1.51-.42l-5.48-9.64a1.1,1.1,0,0,1,.42-1.51c3.43-2,7.42-4,10.75-6.14,4-2.49,7.27-4.48,11.06-5.42s8-.8,13.89,1c2.12.59,4.55,1.48,6.55,2.2,1,.35,1.8.66,2.44.87,9.86,3.29,13.19,9.66,15.78,14.6,1.12,2.13,2.09,4,3.34,5,.51.42,1.67.27,3,.09a21.62,21.62,0,0,1,2.64-.23c4.32-.41,8.66-.66,13-1a1.1,1.1,0,0,1,1.18,1L108,61.86A1.11,1.11,0,0,1,107,63L95,63.9c-5.33.38-9.19.66-15-2.47l-.12-.07a23.23,23.23,0,0,1-7.21-8.5l0,0L65.73,68.4a63.9,63.9,0,0,0,5.85,5.32c6,5,11,9.21,9.38,20.43a23.89,23.89,0,0,1-.65,2.93c-.27,1-.56,1.9-.87,2.84-2.29,6.54-4.22,13.5-6.29,20.13a1.1,1.1,0,0,1-1,.81l-11.66.78a1,1,0,0,1-.39,0,1.12,1.12,0,0,1-.75-1.38c2.45-8.12,5-16.25,7.39-24.38a29,29,0,0,0,.87-3,7,7,0,0,0,.08-2.65l0-.24a4.16,4.16,0,0,0-.73-2.22,53.23,53.23,0,0,0-8.76-5.57c-3.75-2.07-7.41-4.08-10.25-7a12.15,12.15,0,0,1-3.59-7.36A14.76,14.76,0,0,1,46,59.91ZM80.07,6.13a12.29,12.29,0,0,1,13.1,11.39v0a12.29,12.29,0,0,1-24.52,1.72v0A12.3,12.3,0,0,1,80,6.13ZM3.34,35H6.69V51.09H3.34V35Z"/></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/friends-icon.svg b/apps/web/src/lib/assets/friends-icon.svg
new file mode 100644
index 0000000..0e2d7be
--- /dev/null
+++ b/apps/web/src/lib/assets/friends-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 91.99" style="enable-background:new 0 0 122.88 91.99" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M45.13,35.29h-0.04c-7.01-0.79-16.42,0.01-20.78,0C17.04,35.6,9.47,41.91,5.02,51.3 c-2.61,5.51-3.3,9.66-3.73,15.55C0.42,72.79-0.03,78.67,0,84.47c1.43,9.03,12.88,6.35,13.85,0l1.39-18.2 c0.21-2.75,0.4-4.61,1.51-7.23c0.52-1.23,1.15-2.28,1.89-3.15l0.69,33.25l-0.39,2.78h31.49l-0.42-3.1l0.61-36.67 c3.2-1.29,5.96-1.89,8.39-1.99c-0.12,0.25-0.25,0.5-0.37,0.75c-2.61,5.51-3.3,9.66-3.73,15.55c-0.86,5.93-1.32,11.81-1.29,17.61 c1.43,9.03,12.88,6.35,13.85,0l1.39-18.2c0.21-2.75,0.4-4.61,1.51-7.23c0.52-1.23,1.15-2.28,1.89-3.15l0.69,33.25l-0.46,3.24h31.62 l-0.48-3.55l0.49-28.62v0.56l0.1-4.87c0.74,0.87,1.36,1.92,1.89,3.15c1.12,2.62,1.3,4.48,1.51,7.23l1.39,18.2 c1.34,8.68,13.85,8.85,13.85,0c0.03-5.81-0.42-11.68-1.29-17.61c-0.43-5.89-1.12-10.04-3.73-15.55 c-4.57-9.65-10.48-14.76-19.45-15.81c-5.53-0.45-14.82,0.06-20.36-0.1c-1.38,0.19-2.74,0.47-4.06,0.87 c-3.45-0.48-8.01-1.07-12.56-1.09C54.76,34.77,48.15,35.91,45.13,35.29L45.13,35.29z M88.3,0c9.01,0,16.32,7.31,16.32,16.32 c0,9.01-7.31,16.32-16.32,16.32c-9.01,0-16.32-7.31-16.32-16.32C71.98,7.31,79.29,0,88.3,0L88.3,0z M34.56,0 c9.01,0,16.32,7.31,16.32,16.32c0,9.01-7.31,16.32-16.32,16.32s-16.32-7.31-16.32-16.32C18.24,7.31,25.55,0,34.56,0L34.56,0z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/green-checkmark-icon.svg b/apps/web/src/lib/assets/green-checkmark-icon.svg
new file mode 100644
index 0000000..5227b2a
--- /dev/null
+++ b/apps/web/src/lib/assets/green-checkmark-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve"><g><path fill-rule="evenodd" clip-rule="evenodd" fill="#6BBE66" d="M48,0c26.51,0,48,21.49,48,48S74.51,96,48,96S0,74.51,0,48 S21.49,0,48,0L48,0z M26.764,49.277c0.644-3.734,4.906-5.813,8.269-3.79c0.305,0.182,0.596,0.398,0.867,0.646l0.026,0.025 c1.509,1.446,3.2,2.951,4.876,4.443l1.438,1.291l17.063-17.898c1.019-1.067,1.764-1.757,3.293-2.101 c5.235-1.155,8.916,5.244,5.206,9.155L46.536,63.366c-2.003,2.137-5.583,2.332-7.736,0.291c-1.234-1.146-2.576-2.312-3.933-3.489 c-2.35-2.042-4.747-4.125-6.701-6.187C26.993,52.809,26.487,50.89,26.764,49.277L26.764,49.277z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/mining-icon.svg b/apps/web/src/lib/assets/mining-icon.svg
new file mode 100644
index 0000000..9b58fab
--- /dev/null
+++ b/apps/web/src/lib/assets/mining-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 121.2 122.88" style="enable-background:new 0 0 121.2 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M66.17,24.52c9.78,12.13,14.55,26.46,13.93,39.58c-4.52-11.08-11.54-22.31-20.85-32.65l-3.12,3.12 c-0.35,0.35-0.93,0.35-1.28,0l-9.87-9.87c-0.35-0.35-0.35-0.93,0-1.28l3.03-3.03C37.4,11.2,25.96,4.37,14.75,0.13 c13.22-0.99,27.81,3.57,40.2,13.31l1.36-1.36c0.35-0.35,0.93-0.35,1.28,0l9.87,9.87c0.35,0.35,0.35,0.93,0,1.28L66.17,24.52 L66.17,24.52z M49.32,58.69v-4.05l19.11,2.04L49.32,58.69L49.32,58.69z M57.83,74.36l-2.87-2.87l14.96-12.07L57.83,74.36 L57.83,74.36z M111.77,35.18l2.32,5.02l-24.85,8.4L111.77,35.18L111.77,35.18z M92.26,20.63l5.19,1.91L85.82,46.05L92.26,20.63 L92.26,20.63z M102.7,57.6l18.5,11.47v53.81H25.73c19.44-19.44,46.04-25.61,61.42-52.24C92.99,60.52,91.01,49.7,102.7,57.6 L102.7,57.6z M44.6,27.81l7.99,7.99L9.64,78.76c-2.2,2.2-5.8,2.2-7.99,0l0,0c-2.2-2.2-2.2-5.8,0-7.99L44.6,27.81L44.6,27.81z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/on-time-icon.svg b/apps/web/src/lib/assets/on-time-icon.svg
new file mode 100644
index 0000000..d769744
--- /dev/null
+++ b/apps/web/src/lib/assets/on-time-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 99.56" style="enable-background:new 0 0 122.88 99.56" xml:space="preserve"><style type="text/css">.st0{fill:#393939;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#38AE48;}</style><g><path class="st0" d="M73.1,0c6.73,0,13.16,1.34,19.03,3.78c6.09,2.52,11.57,6.22,16.16,10.81c4.59,4.58,8.28,10.06,10.81,16.17 c2.43,5.87,3.78,12.3,3.78,19.03c0,6.73-1.34,13.16-3.78,19.03c-2.52,6.09-6.22,11.58-10.81,16.16 c-4.58,4.59-10.06,8.28-16.17,10.81c-5.87,2.43-12.3,3.78-19.03,3.78c-6.73,0-13.16-1.34-19.03-3.77 c-6.09-2.52-11.57-6.22-16.16-10.81l-0.01-0.01c-4.59-4.59-8.29-10.07-10.81-16.16c-0.78-1.89-1.45-3.83-2-5.82 c1.04,0.1,2.1,0.15,3.17,0.15c2.03,0,4.01-0.18,5.94-0.53c0.32,0.96,0.67,1.91,1.05,2.84c2.07,5,5.11,9.51,8.9,13.29 c3.78,3.78,8.29,6.82,13.29,8.9c4.81,1.99,10.11,3.1,15.66,3.1c5.56,0,10.85-1.1,15.66-3.1c5-2.07,9.51-5.11,13.29-8.9 c3.78-3.78,6.82-8.29,8.9-13.29c1.99-4.81,3.1-10.11,3.1-15.66c0-5.56-1.1-10.85-3.1-15.66c-2.07-5-5.11-9.51-8.9-13.29 c-3.78-3.78-8.29-6.82-13.29-8.9c-4.81-1.99-10.11-3.1-15.66-3.1c-5.56,0-10.85,1.1-15.66,3.1c-0.43,0.18-0.86,0.37-1.28,0.56 c-1.64-2.58-3.62-4.92-5.89-6.95c1.24-0.64,2.51-1.23,3.8-1.77C59.94,1.34,66.37,0,73.1,0L73.1,0z M67.38,26.12 c0-1.22,0.5-2.33,1.3-3.13c0.8-0.8,1.9-1.3,3.12-1.3c1.22,0,2.33,0.5,3.13,1.3c0.8,0.8,1.3,1.91,1.3,3.13v23.22l17.35,10.29 c1.04,0.62,1.74,1.6,2.03,2.7c0.28,1.09,0.15,2.29-0.47,3.34c-0.62,1.04-1.6,1.74-2.7,2.03c-1.09,0.28-2.29,0.15-3.33-0.47 L69.65,55.71c-0.67-0.37-1.22-0.91-1.62-1.55c-0.41-0.67-0.65-1.46-0.65-2.3V26.12L67.38,26.12z"/><path class="st1" d="M26.99,2.56c14.91,0,26.99,12.08,26.99,26.99c0,14.91-12.08,26.99-26.99,26.99C12.08,56.54,0,44.45,0,29.55 C0,14.64,12.08,2.56,26.99,2.56L26.99,2.56z M15.05,30.27c0.36-2.1,2.76-3.27,4.65-2.13c0.17,0.1,0.34,0.22,0.49,0.36l0.02,0.01 c0.85,0.81,1.8,1.66,2.74,2.5l0.81,0.73l9.59-10.06c0.57-0.6,0.99-0.99,1.85-1.18c2.94-0.65,5.01,2.95,2.93,5.15L26.17,38.19 c-1.13,1.2-3.14,1.31-4.35,0.16c-0.69-0.64-1.45-1.3-2.21-1.96c-1.32-1.15-2.67-2.32-3.77-3.48 C15.18,32.25,14.89,31.17,15.05,30.27L15.05,30.27z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/remove-date-calendar-icon.svg b/apps/web/src/lib/assets/remove-date-calendar-icon.svg
new file mode 100644
index 0000000..f865919
--- /dev/null
+++ b/apps/web/src/lib/assets/remove-date-calendar-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 506.47"><path fill-rule="nonzero" d="M294.23 17.11c0-9.42 9.3-17.11 20.88-17.11 11.57 0 20.86 7.64 20.86 17.11v74.84c0 9.42-9.29 17.11-20.86 17.11-11.58 0-20.88-7.64-20.88-17.11V17.11zm119.98 304.68 14.12 14.1c3.3 3.32 3.3 8.86 0 12.18l-24.21 24.21 24.21 24.21c3.32 3.32 3.32 8.86 0 12.18l-14.11 14.1c-3.31 3.32-8.82 3.35-12.17 0l-24.21-24.21-24.24 24.23c-3.3 3.3-8.82 3.34-12.16 0l-14.11-14.11c-3.35-3.35-3.35-8.83 0-12.17l24.23-24.23-24.21-24.23c-3.35-3.34-3.35-8.81 0-12.16l14.1-14.1c3.35-3.35 8.86-3.32 12.16 0L377.84 346l24.21-24.21c3.35-3.35 8.89-3.29 12.16 0zm-36.4-83.69c37.02 0 70.6 15.04 94.88 39.32C496.96 301.69 512 335.24 512 372.3c0 36.97-15.04 70.56-39.34 94.83-24.25 24.3-57.8 39.34-94.85 39.34-37.03 0-70.56-15.04-94.84-39.3-24.32-24.27-39.34-57.85-39.34-94.87 0-37.06 15.04-70.61 39.31-94.88l.69-.64c24.24-23.9 57.53-38.68 94.18-38.68zm78.75 55.44c-20.15-20.14-48-32.61-78.75-32.61-30.5 0-58.14 12.25-78.19 32.02l-.55.59c-20.14 20.15-32.62 48.01-32.62 78.76 0 30.74 12.46 58.6 32.61 78.75 20.1 20.13 47.98 32.6 78.75 32.6 30.75 0 58.6-12.47 78.75-32.62 20.14-20.08 32.61-47.95 32.61-78.73 0-30.75-12.47-58.61-32.61-78.76zM56.81 242.28c-1.18 0-2.24-5.2-2.24-11.57 0-6.39.93-11.54 2.24-11.54h56.94c1.18 0 2.24 5.2 2.24 11.54 0 6.38-.93 11.57-2.24 11.57H56.81zm90.77 0c-1.18 0-2.24-5.2-2.24-11.57 0-6.39.93-11.54 2.24-11.54h56.94c1.18 0 2.24 5.2 2.24 11.54 0 6.38-.93 11.57-2.24 11.57h-56.94zm90.77 0c-1.18 0-2.24-5.2-2.24-11.57 0-6.39.93-11.54 2.24-11.54h56.94c1.18 0 2.24 5.15 2.24 11.49-5.7 3.55-11.19 7.44-16.42 11.62h-42.76zM56.94 308.51c-1.19 0-2.23-5.2-2.23-11.57 0-6.38.92-11.58 2.23-11.58h56.93c1.19 0 2.25 5.2 2.25 11.58 0 6.37-.94 11.57-2.25 11.57H56.94zm90.77 0c-1.19 0-2.23-5.2-2.23-11.57 0-6.38.92-11.58 2.23-11.58h56.93c1.19 0 2.25 5.2 2.25 11.58 0 6.37-.94 11.57-2.25 11.57h-56.93zm-90.63 66.28c-1.19 0-2.25-5.2-2.25-11.59 0-6.36.92-11.57 2.25-11.57h56.93c1.17 0 2.23 5.21 2.23 11.57 0 6.39-.92 11.59-2.23 11.59H57.08zm90.77 0c-1.19 0-2.25-5.2-2.25-11.59 0-6.36.92-11.57 2.25-11.57h56.93c1.17 0 2.23 5.21 2.23 11.57 0 6.39-.92 11.59-2.23 11.59h-56.93zM106.82 17.11c0-9.42 9.3-17.11 20.86-17.11 11.59 0 20.88 7.64 20.88 17.11v74.84c0 9.42-9.34 17.11-20.88 17.11-11.56 0-20.86-7.64-20.86-17.11V17.11zM22.98 163.63h397.38V77.46c0-2.94-1.19-5.53-3.09-7.43-1.89-1.9-4.6-3.08-7.42-3.08h-38.1c-6.38 0-11.58-5.2-11.58-11.57 0-6.38 5.2-11.58 11.58-11.58h38.1c9.32 0 17.68 3.76 23.82 9.88 6.12 6.14 9.87 14.5 9.87 23.82v136.81c-7.6-2.61-15.41-4.73-23.43-6.29v-21.37h.25H22.98V409.8c0 2.95 1.18 5.53 3.08 7.43 1.9 1.9 4.61 3.08 7.45 3.08h188.84c2.14 8.02 4.85 15.83 8.11 23.36H33.71c-9.3 0-17.69-3.76-23.82-9.89C3.77 427.71 0 419.35 0 410V77.55c0-9.29 3.77-17.7 9.89-23.82 6.13-6.13 14.49-9.89 23.82-9.89h40.68c6.37 0 11.57 5.2 11.57 11.57 0 6.39-5.2 11.59-11.57 11.59H33.71c-2.96 0-5.53 1.18-7.43 3.08-1.9 1.9-3.08 4.59-3.08 7.42v86.17h-.22v-.04zm158.95-96.68c-6.39 0-11.57-5.2-11.57-11.57 0-6.38 5.18-11.58 11.57-11.58h77.55c6.37 0 11.57 5.2 11.57 11.58 0 6.37-5.2 11.57-11.57 11.57h-77.55z"/></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/robots.txt b/apps/web/src/lib/assets/robots.txt
new file mode 100644
index 0000000..b6dd667
--- /dev/null
+++ b/apps/web/src/lib/assets/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
diff --git a/apps/web/src/lib/assets/sand-clock-half-icon.svg b/apps/web/src/lib/assets/sand-clock-half-icon.svg
new file mode 100644
index 0000000..37754a1
--- /dev/null
+++ b/apps/web/src/lib/assets/sand-clock-half-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="105.765px" height="122.88px" viewBox="0 0 105.765 122.88" enable-background="new 0 0 105.765 122.88" xml:space="preserve"><g><path d="M82.872,90.81c-2.983-8.16-7.707-14.175-13.283-18.06c-3.772-2.629-7.914-4.284-12.133-4.97 c-4.236-0.686-8.583-0.408-12.747,0.828C35.573,71.323,27.33,78.716,22.903,90.81H82.872L82.872,90.81z M20.618,27.21h64.535 c0.346-2.922,1.154-13.713,1.119-16.995H19.497C19.462,13.498,20.27,24.288,20.618,27.21L20.618,27.21L20.618,27.21z M0.91,112.665 h9.567C10.222,85.12,22.648,68.03,38.027,61.466C22.637,54.9,10.205,37.79,10.478,10.214l-9.567,0c-0.501,0-0.909-0.46-0.909-1.025 L0,1.024C0,0.46,0.409,0,0.91,0h103.944c0.5,0,0.91,0.46,0.91,1.024v8.164c0,0.563-0.41,1.024-0.91,1.024h-9.57 c0.225,23.214-8.581,39.038-20.546,47.376c-2.188,1.522-4.543,2.832-6.994,3.873c2.446,1.049,4.81,2.354,6.992,3.88 c11.955,8.332,20.756,24.139,20.546,47.321l9.572,0.001c0.5,0,0.91,0.463,0.91,1.026v8.162c0,0.564-0.41,1.027-0.91,1.027H0.91 c-0.501,0-0.909-0.463-0.909-1.026v-8.162C0.001,113.128,0.41,112.665,0.91,112.665L0.91,112.665L0.91,112.665z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/time-expire-icon.svg b/apps/web/src/lib/assets/time-expire-icon.svg
new file mode 100644
index 0000000..06a1bb8
--- /dev/null
+++ b/apps/web/src/lib/assets/time-expire-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 406.6"><path d="M334.1 1.64a202.504 202.504 0 0 1 135.16 77.02c68.84 88.6 52.82 216.19-35.78 285.03-.08.05-.14.11-.22.18-88.57 68.82-216.15 52.81-284.97-35.76-.04-.06-.09-.12-.14-.17A204.822 204.822 0 0 1 125.31 291a168.69 168.69 0 0 0 37.79-5.42 172.61 172.61 0 0 0 13.55 20.29c56.7 72.81 161.67 85.86 234.46 29.15 72.8-56.69 85.84-161.66 29.15-234.46-40.28-51.71-107.08-75.09-170.82-59.79a171.08 171.08 0 0 0-21.88-31.29c2.46-.8 4.95-1.51 7.46-2.21 25.77-7.13 52.69-9.03 79.19-5.63h-.11zM0 129.16v-15.4C3.97 50.8 56.26.95 120.21.92h.05c66.58-.01 120.55 53.93 120.59 120.51.03 66.58-53.93 120.56-120.51 120.59C56.33 242.04 3.97 192.17 0 129.16zm106.56 31.56h27.62v24.45h-27.62v-24.45zm27.6-14.21h-27.6c-2.75-33.56-8.53-32.84-8.53-66.35 0-12.37 10.03-22.39 22.39-22.39 12.36 0 22.4 10.02 22.4 22.39 0 33.49-5.85 32.83-8.66 66.35zm163.46-42c1.24-9.88 10.24-16.88 20.09-15.64h.04c9.82 1.32 16.73 10.32 15.46 20.13l-11.7 94.09 65.06 50.55c7.85 6.1 9.3 17.4 3.2 25.28a18.011 18.011 0 0 1-11.95 6.82c-4.73.62-9.51-.68-13.26-3.62l-72.82-56.61a17.818 17.818 0 0 1-5.79-7.08 18.336 18.336 0 0 1-1.46-9.67l13.13-104.2v-.05z"/></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/assets/time-period-icon.svg b/apps/web/src/lib/assets/time-period-icon.svg
new file mode 100644
index 0000000..382e449
--- /dev/null
+++ b/apps/web/src/lib/assets/time-period-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 112.9"><title>time-period</title><path d="M35.69,101.21a24.08,24.08,0,0,0-4.23-11.35c-2.27-3.17-5.22-5.33-8.32-5.33s-6.06,2.16-8.33,5.33a24.08,24.08,0,0,0-4.23,11.35Zm78.39-73.63a4.17,4.17,0,0,0-7.37,3.81,4.68,4.68,0,0,0,.37.7,44,44,0,0,1,3.6,6.74,4.17,4.17,0,0,0,7.94-2.29,4.32,4.32,0,0,0-.3-1,52.05,52.05,0,0,0-4.24-7.93ZM107.14,16.5a4.63,4.63,0,0,1-3.23,5.18L91.54,25.46a4.63,4.63,0,1,1-2.69-8.86L90,16.24A47,47,0,0,0,22.46,44.49H13.84A55.33,55.33,0,0,1,94.7,9.33l-1.16-3A4.64,4.64,0,1,1,102.22,3l4.62,12.09a4.81,4.81,0,0,1,.3,1.42ZM67.6,104.55a53.52,53.52,0,0,0,9.43-.87,4.17,4.17,0,0,1,1,8.25,61.44,61.44,0,0,1-7.38.94c-1.31.06-3,0-4.34,0a55.19,55.19,0,0,1-10.91-1.33V103a46.85,46.85,0,0,0,12.15,1.59Zm23.25-6a4.17,4.17,0,1,0,4.09,7.26,55.27,55.27,0,0,0,7.46-5.06,4.17,4.17,0,0,0-3.89-7.21,4.07,4.07,0,0,0-1.34.73,47.39,47.39,0,0,1-6.32,4.28Zm16.42-15.64a4.16,4.16,0,1,0,7.06,4.41,55.51,55.51,0,0,0,4.15-8,4.17,4.17,0,0,0-7.15-4.14,4.11,4.11,0,0,0-.54.93,46,46,0,0,1-3.52,6.79Zm7.13-21.62a4.17,4.17,0,0,0,8.16,1.46,3.91,3.91,0,0,0,.15-.83,56.09,56.09,0,0,0,0-9,4.16,4.16,0,1,0-8.3.69,47.78,47.78,0,0,1,0,7.66ZM59.12,35a4.29,4.29,0,0,1,8.57,0V61.09l17.84,7.85a4.28,4.28,0,1,1-3.44,7.83L61.91,67.9a4.29,4.29,0,0,1-2.79-4V35ZM12.59,70.51h21.1a20.92,20.92,0,0,0,2-7H10.56a20.7,20.7,0,0,0,2,7ZM2.47,105.83a2.09,2.09,0,1,1,0-4.1H5.55a28.67,28.67,0,0,1,5.13-14.44,19.38,19.38,0,0,1,6.1-5.67,18.41,18.41,0,0,1-6.17-5.21,24.83,24.83,0,0,1-5.07-14H2.61a2.09,2.09,0,1,1,0-4.1H43.93a2.09,2.09,0,1,1,0,4.1h-3.2a24.83,24.83,0,0,1-5.07,14,18.41,18.41,0,0,1-6.17,5.21,19.38,19.38,0,0,1,6.1,5.67,28.67,28.67,0,0,1,5.13,14.44H43.8a2.09,2.09,0,1,1,0,4.1H2.47Z"/></svg>
\ No newline at end of file
diff --git a/apps/web/src/lib/styles/base.css b/apps/web/src/lib/styles/base.css
index d391dc4..eb61b9d 100644
--- a/apps/web/src/lib/styles/base.css
+++ b/apps/web/src/lib/styles/base.css
@@ -26,6 +26,7 @@ svg,
 video {
 	display: block;
 	max-width: 100%;
+  height: 0.8rem;
 }
 
 a {
diff --git a/apps/web/src/lib/styles/tokens.css b/apps/web/src/lib/styles/tokens.css
index 07209a8..8717e15 100644
--- a/apps/web/src/lib/styles/tokens.css
+++ b/apps/web/src/lib/styles/tokens.css
@@ -35,5 +35,6 @@
     --color-danger: #f87171;
     --color-warning: #fbbf24;
     --color-success: #34d399;
+    --color-primary-muted: #60a5fa55;
   }
 }
diff --git a/apps/web/src/lib/ui/data/TaskItem.svelte b/apps/web/src/lib/ui/data/TaskItem.svelte
index e64134e..10f5b0f 100644
--- a/apps/web/src/lib/ui/data/TaskItem.svelte
+++ b/apps/web/src/lib/ui/data/TaskItem.svelte
@@ -1,721 +1,888 @@
 <script lang="ts">
-	import {
-		compareYmd,
-		todayYmdUTC,
-		ymdToDmy,
-		isToday,
-		isTomorrow,
-	} from "$lib/utils/date";
-	import { success, error as toastError } from "$lib/stores/toasts";
-	import { tick, onDestroy } from "svelte";
-	import Popover from "$lib/ui/feedback/Popover.svelte";
-	import { normalizeDigits, buildWaMeUrl } from "$lib/utils/phone";
-	import { colorForGroup } from "$lib/utils/groupColor";
-	import Hourglass from "$lib/ui/icons/Hourglass.svelte";
+  import {
+    compareYmd,
+    todayYmdUTC,
+    ymdToDmy,
+    isToday,
+    isTomorrow,
+  } from "$lib/utils/date";
+  import { success, error as toastError } from "$lib/stores/toasts";
+  import { tick, onDestroy } from "svelte";
+  import Popover from "$lib/ui/feedback/Popover.svelte";
+  import { normalizeDigits, buildWaMeUrl } from "$lib/utils/phone";
+  import { colorForGroup } from "$lib/utils/groupColor";
+  import Hourglass from "$lib/ui/icons/Hourglass.svelte";
+  import duedateicon from "$lib/assets/on-time-icon.svg";
+  import releaseicon from "$lib/assets/emergency-exit-icon.svg";
+  import overdueicon from "$lib/assets/time-period-icon.svg";
+  import asigneesicon from "$lib/assets/friends-icon.svg";
+  import claimicon from "$lib/assets/mining-icon.svg";
+  import changedateicon from "$lib/assets/remove-date-calendar-icon.svg";
 
-	export let id: number;
-	export let description: string;
-	export let due_date: string | null = null;
-	export let display_code: number | null = null;
-	export let assignees: string[] = [];
-	export let currentUserId: string | null | undefined = null;
-	export let completed: boolean = false;
-	export let completed_at: string | null = null;
-	export let groupName: string | null = null;
-	export let groupId: string | null = null;
+  export let id: number;
+  export let description: string;
+  export let due_date: string | null = null;
+  export let display_code: number | null = null;
+  export let assignees: string[] = [];
+  export let currentUserId: string | null | undefined = null;
+  export let completed: boolean = false;
+  export let completed_at: string | null = null;
+  export let groupName: string | null = null;
+  export let groupId: string | null = null;
 
-	const code = display_code ?? id;
-	const codeStr = String(code).padStart(4, "0");
-	$: isAssigned =
-		!!currentUserId &&
-		assignees.some(
-			(a) => normalizeDigits(a) === normalizeDigits(currentUserId),
-		);
-	$: today = todayYmdUTC();
-	$: overdue = !!due_date && compareYmd(due_date, today) < 0;
-	$: imminent = !!due_date && (isToday(due_date) || isTomorrow(due_date));
-	$: dateDmy = due_date ? ymdToDmy(due_date) : "";
-	$: groupLabel = groupName != null ? groupName : "Personal";
-	$: gc = groupId ? colorForGroup(groupId) : null;
+  const code = display_code ?? id;
+  const codeStr = String(code).padStart(4, "0");
+  $: isAssigned =
+    !!currentUserId &&
+    assignees.some(
+      (a) => normalizeDigits(a) === normalizeDigits(currentUserId),
+    );
+  $: today = todayYmdUTC();
+  $: overdue = !!due_date && compareYmd(due_date, today) < 0;
+  $: imminent = !!due_date && (isToday(due_date) || isTomorrow(due_date));
+  $: dateDmy = due_date ? ymdToDmy(due_date) : "";
+  $: groupLabel = groupName != null ? groupName : "Personal";
+  $: gc = groupId ? colorForGroup(groupId) : null;
 
-	let editing = false;
-	let dateValue: string = due_date ?? "";
-	let busy = false;
+  let editing = false;
+  let dateValue: string = due_date ?? "";
+  let busy = false;
 
-	// Popover de responsables
-	let showAssignees = false;
-	let assigneesButtonEl: HTMLButtonElement | null = null;
-	$: assigneesCount = Array.isArray(assignees) ? assignees.length : 0;
-	$: assigneesAria =
-		assigneesCount === 0
-			? "Sin responsables"
-			: `${assigneesCount} responsable${assigneesCount === 1 ? "" : "s"}${isAssigned ? "; tú incluido" : ""}`;
+  // Popover de responsables
+  let showAssignees = false;
+  let assigneesButtonEl: HTMLButtonElement | null = null;
+  $: assigneesCount = Array.isArray(assignees) ? assignees.length : 0;
+  $: assigneesAria =
+    assigneesCount === 0
+      ? "Sin responsables"
+      : `${assigneesCount} responsable${assigneesCount === 1 ? "" : "s"}${isAssigned ? "; tú incluido" : ""}`;
 
-	onDestroy(() => {
-		// Cerrar popover si se desmonta el item (por navegación o filtrado)
-		showAssignees = false;
-	});
+  onDestroy(() => {
+    // Cerrar popover si se desmonta el item (por navegación o filtrado)
+    showAssignees = false;
+  });
 
-	// Edición de texto (inline)
-	let editingText = false;
-	let descEl: HTMLElement | null = null;
+  // Edición de texto (inline)
+  let editingText = false;
+  let descEl: HTMLElement | null = null;
 
-	async function doClaim() {
-		if (busy) return;
-		busy = true;
-		try {
-			const res = await fetch(`/api/tasks/${id}/claim`, { method: "POST" });
-			if (res.ok) {
-				success("Tarea reclamada");
-				location.reload();
-			} else {
-				const txt = await res.text();
-				toastError(txt || "No se pudo reclamar");
-			}
-		} catch (e) {
-			toastError("Error de red");
-		} finally {
-			busy = false;
-		}
-	}
+  async function doClaim() {
+    if (busy) return;
+    busy = true;
+    try {
+      const res = await fetch(`/api/tasks/${id}/claim`, { method: "POST" });
+      if (res.ok) {
+        success("Tarea reclamada");
+        location.reload();
+      } else {
+        const txt = await res.text();
+        toastError(txt || "No se pudo reclamar");
+      }
+    } catch (e) {
+      toastError("Error de red");
+    } finally {
+      busy = false;
+    }
+  }
 
-	async function doComplete() {
-		if (busy || completed) return;
-		busy = true;
-		try {
-			const hadNoAssignees = assigneesCount === 0;
-			const res = await fetch(`/api/tasks/${id}/complete`, { method: "POST" });
-			if (res.ok) {
-				success(hadNoAssignees ? "Te has asignado y completado la tarea" : "Tarea completada");
-				location.reload();
-			} else {
-				const txt = await res.text();
-				toastError(txt || "No se pudo completar la tarea");
-			}
-		} catch {
-			toastError("Error de red");
-		} finally {
-			busy = false;
-		}
-	}
+  async function doComplete() {
+    if (busy || completed) return;
+    busy = true;
+    try {
+      const hadNoAssignees = assigneesCount === 0;
+      const res = await fetch(`/api/tasks/${id}/complete`, { method: "POST" });
+      if (res.ok) {
+        success(
+          hadNoAssignees
+            ? "Te has asignado y completado la tarea"
+            : "Tarea completada",
+        );
+        location.reload();
+      } else {
+        const txt = await res.text();
+        toastError(txt || "No se pudo completar la tarea");
+      }
+    } catch {
+      toastError("Error de red");
+    } finally {
+      busy = false;
+    }
+  }
 
-	async function doUncomplete() {
-		if (busy || !completed) return;
-		busy = true;
-		try {
-			const res = await fetch(`/api/tasks/${id}/uncomplete`, {
-				method: "POST",
-			});
-			if (res.ok) {
-				success("Tarea reabierta");
-				location.reload();
-			} else {
-				const txt = await res.text();
-				toastError(txt || "No se pudo deshacer completar");
-			}
-		} catch {
-			toastError("Error de red");
-		} finally {
-			busy = false;
-		}
-	}
+  async function doUncomplete() {
+    if (busy || !completed) return;
+    busy = true;
+    try {
+      const res = await fetch(`/api/tasks/${id}/uncomplete`, {
+        method: "POST",
+      });
+      if (res.ok) {
+        success("Tarea reabierta");
+        location.reload();
+      } else {
+        const txt = await res.text();
+        toastError(txt || "No se pudo deshacer completar");
+      }
+    } catch {
+      toastError("Error de red");
+    } finally {
+      busy = false;
+    }
+  }
 
-	async function doUnassign() {
-		if (busy) return;
-		busy = true;
-		try {
-			const res = await fetch(`/api/tasks/${id}/unassign`, { method: "POST" });
-			if (res.ok) {
-				success("Asignación eliminada");
-				location.reload();
-			} else {
-				const txt = await res.text();
-				toastError(txt || "No se pudo soltar");
-			}
-		} catch {
-			toastError("Error de red");
-		} finally {
-			busy = false;
-		}
-	}
+  async function doUnassign() {
+    if (busy) return;
+    busy = true;
+    try {
+      const res = await fetch(`/api/tasks/${id}/unassign`, { method: "POST" });
+      if (res.ok) {
+        success("Asignación eliminada");
+        location.reload();
+      } else {
+        const txt = await res.text();
+        toastError(txt || "No se pudo soltar");
+      }
+    } catch {
+      toastError("Error de red");
+    } finally {
+      busy = false;
+    }
+  }
 
-	async function saveDate() {
-		if (busy) return;
-		busy = true;
-		try {
-			const body = {
-				due_date:
-					dateValue && dateValue.trim() !== "" ? dateValue.trim() : null,
-			};
-			const res = await fetch(`/api/tasks/${id}`, {
-				method: "PATCH",
-				headers: { "content-type": "application/json" },
-				body: JSON.stringify(body),
-			});
-			if (res.ok) {
-				success("Fecha actualizada");
-				location.reload();
-			} else {
-				const txt = await res.text();
-				toastError(txt || "No se pudo actualizar la fecha");
-			}
-		} catch {
-			toastError("Error de red");
-		} finally {
-			busy = false;
-		}
-	}
+  async function saveDate() {
+    if (busy) return;
+    busy = true;
+    try {
+      const body = {
+        due_date:
+          dateValue && dateValue.trim() !== "" ? dateValue.trim() : null,
+      };
+      const res = await fetch(`/api/tasks/${id}`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (res.ok) {
+        success("Fecha actualizada");
+        location.reload();
+      } else {
+        const txt = await res.text();
+        toastError(txt || "No se pudo actualizar la fecha");
+      }
+    } catch {
+      toastError("Error de red");
+    } finally {
+      busy = false;
+    }
+  }
 
-	function toggleEdit() {
-		editing = !editing;
-		if (editing) editingText = false;
-		dateValue = due_date ?? "";
-	}
+  function toggleEdit() {
+    editing = !editing;
+    if (editing) editingText = false;
+    dateValue = due_date ?? "";
+  }
 
-	function clearDate() {
-		if (busy) return;
-		if (!confirm("¿Quitar la fecha de vencimiento?")) return;
-		dateValue = "";
-		saveDate();
-	}
+  function clearDate() {
+    if (busy) return;
+    if (!confirm("¿Quitar la fecha de vencimiento?")) return;
+    dateValue = "";
+    saveDate();
+  }
 
-	function toggleEditText() {
-		editingText = !editingText;
-		if (editingText) {
-			editing = false;
-			// Asegurar que el elemento refleja el texto actual y enfocarlo
-			if (descEl) {
-				descEl.textContent = description;
-			}
-			tick().then(() => {
-				if (descEl) {
-					descEl.focus();
-					placeCaretAtEnd(descEl);
-				}
-			});
-		}
-	}
+  function toggleEditText() {
+    editingText = !editingText;
+    if (editingText) {
+      editing = false;
+      // Asegurar que el elemento refleja el texto actual y enfocarlo
+      if (descEl) {
+        descEl.textContent = description;
+      }
+      tick().then(() => {
+        if (descEl) {
+          descEl.focus();
+          placeCaretAtEnd(descEl);
+        }
+      });
+    }
+  }
 
-	function placeCaretAtEnd(el: HTMLElement) {
-		const range = document.createRange();
-		range.selectNodeContents(el);
-		range.collapse(false);
-		const sel = window.getSelection();
-		sel?.removeAllRanges();
-		sel?.addRange(range);
-	}
+  function placeCaretAtEnd(el: HTMLElement) {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }
 
-	async function saveText() {
-		if (busy) return;
-		const raw = (descEl?.textContent || "").replace(/\s+/g, " ").trim();
-		if (raw.length < 1 || raw.length > 1000) {
-			toastError("La descripción debe tener entre 1 y 1000 caracteres.");
-			return;
-		}
-		if (raw === description) {
-			editingText = false;
-			return;
-		}
-		busy = true;
-		try {
-			const res = await fetch(`/api/tasks/${id}`, {
-				method: "PATCH",
-				headers: { "content-type": "application/json" },
-				body: JSON.stringify({ description: raw }),
-			});
-			if (res.ok) {
-				description = raw;
-				success("Descripción actualizada");
-				editingText = false;
-			} else {
-				const txt = await res.text();
-				toastError(txt || "No se pudo actualizar la descripción");
-			}
-		} catch {
-			toastError("Error de red");
-		} finally {
-			busy = false;
-		}
-	}
+  async function saveText() {
+    if (busy) return;
+    const raw = (descEl?.textContent || "").replace(/\s+/g, " ").trim();
+    if (raw.length < 1 || raw.length > 1000) {
+      toastError("La descripción debe tener entre 1 y 1000 caracteres.");
+      return;
+    }
+    if (raw === description) {
+      editingText = false;
+      return;
+    }
+    busy = true;
+    try {
+      const res = await fetch(`/api/tasks/${id}`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ description: raw }),
+      });
+      if (res.ok) {
+        description = raw;
+        success("Descripción actualizada");
+        editingText = false;
+      } else {
+        const txt = await res.text();
+        toastError(txt || "No se pudo actualizar la descripción");
+      }
+    } catch {
+      toastError("Error de red");
+    } finally {
+      busy = false;
+    }
+  }
 
-	function cancelText() {
-		if (descEl) {
-			descEl.textContent = description;
-		}
-		editingText = false;
-	}
+  function cancelText() {
+    if (descEl) {
+      descEl.textContent = description;
+    }
+    editingText = false;
+  }
 </script>
 
 <li class="task" class:completed>
-	<div class="code">{codeStr}</div>
-	<div
-		tabindex="0"
-		class="desc"
-		class:editing={editingText}
-		class:completed
-		contenteditable={editingText && !completed}
-		role="textbox"
-		aria-label="Descripción de la tarea"
-		spellcheck="true"
-		bind:this={descEl}
-		on:keydown={(e) => {
-			if (e.key === "Escape") {
-				e.preventDefault();
-				cancelText();
-			} else if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-				e.preventDefault();
-				saveText();
-			} else if (e.key === "Enter") {
-				e.preventDefault();
-			}
-		}}
-	>
-		{description}
-	</div>
+  <div class="code">{codeStr}</div>
+  <div
+    tabindex="0"
+    class="desc"
+    class:editing={editingText}
+    class:completed
+    contenteditable={editingText && !completed}
+    role="textbox"
+    aria-label="Descripción de la tarea"
+    spellcheck="true"
+    bind:this={descEl}
+    on:keydown={(e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelText();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        saveText();
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+      }
+    }}
+  >
+    {description}
+  </div>
 
-	<div class="meta">
-		<span
-			class="group-badge"
-			title="Grupo"
-			style={gc ? `--gc-border: ${gc.border}; --gc-bg: ${gc.bg}; --gc-text: ${gc.text};` : undefined}
-		>{groupLabel}</span>
-		{#if due_date}
-			<span
-				class="date-badge"
-				class:overdue
-				class:soon={imminent}
-				title={overdue ? "Vencida" : imminent ? "Próxima" : "Fecha"}
-			>
-				<Hourglass size={16} />
-				{dateDmy}{#if overdue}
-					⚠{/if}
-			</span>
-		{/if}
-	</div>
-	<div class="complete">
-		{#if completed}
-			<button
-				class="btn primary primary-action"
-				aria-label="Deshacer completar"
-				title="Deshacer completar"
-				on:click|preventDefault={doUncomplete}
-				disabled={busy}
-			>
-				↩️ Deshacer
-			</button>
-		{:else}
-			<button
-				class="btn primary primary-action"
-				aria-label="Completar"
-				title="Completar"
-				on:click|preventDefault={doComplete}
-				disabled={busy}
-			>
-				✅ Completar
-			</button>
-		{/if}
-	</div>
-	<div class="assignees-container">
-		{#if assigneesCount === 0}
-			<button
-				class="assignees-badge empty"
-				type="button"
-				aria-haspopup="dialog"
-				aria-expanded="false"
-				aria-controls={"assignees-popover-" + id}
-				title="Sin responsables"
-				disabled
-				bind:this={assigneesButtonEl}
-			>
-				🙅
-			</button>
-		{:else}
-			<button
-				class="assignees-badge"
-				class:mine={isAssigned}
-				type="button"
-				aria-haspopup="dialog"
-				aria-expanded={showAssignees}
-				aria-controls={"assignees-popover-" + id}
-				title={assigneesAria}
-				aria-label={assigneesAria}
-				on:click|preventDefault={() => (showAssignees = true)}
-				bind:this={assigneesButtonEl}
-			>
-				<span class="icon" aria-hidden="true">👥</span>
-				<span class="count">{assigneesCount}</span>
-			</button>
-		{/if}
-	</div>
-	<div class="actions">
-		{#if !completed}
-			{#if !isAssigned}
-				<button
-					class="icon-btn secondary-action"
-					aria-label="Reclamar"
-					on:click|preventDefault={doClaim}
-					disabled={busy}>Reclamar</button
-				>
-			{:else}
-				<button
-					class="icon-btn secondary-action"
-					aria-label="Soltar"
-					title="Soltar"
-					on:click|preventDefault={doUnassign}
-					disabled={busy}>🫳 Soltar</button
-				>
-			{/if}
+  <div class="meta">
+    <span
+      class="group-badge"
+      title="Grupo"
+      style={gc
+        ? `--gc-border: ${gc.border}; --gc-bg: ${gc.bg}; --gc-text: ${gc.text};`
+        : undefined}>{groupLabel}</span
+    >
+    {#if due_date}
+      <span
+        class="date-badge"
+        class:overdue
+        class:soon={imminent}
+        title={overdue ? "Vencida" : imminent ? "Próxima" : "Fecha"}
+      >
+        {#if !overdue && !imminent}
+          <svg
+            version="1.1"
+            id="Layer_5"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            x="0px"
+            y="0px"
+            viewBox="0 0 122.88 99.56"
+            style="enable-background:new 0 0 122.88 99.56"
+            xml:space="preserve"
+            ><style type="text/css">
+              .st0 {
+                fill: var(--color-text);
+              }
+              .st1 {
+                fill-rule: evenodd;
+                clip-rule: evenodd;
+                fill: #38ae48;
+              }
+            </style><g
+              ><path
+                class="st0"
+                d="M73.1,0c6.73,0,13.16,1.34,19.03,3.78c6.09,2.52,11.57,6.22,16.16,10.81c4.59,4.58,8.28,10.06,10.81,16.17 c2.43,5.87,3.78,12.3,3.78,19.03c0,6.73-1.34,13.16-3.78,19.03c-2.52,6.09-6.22,11.58-10.81,16.16 c-4.58,4.59-10.06,8.28-16.17,10.81c-5.87,2.43-12.3,3.78-19.03,3.78c-6.73,0-13.16-1.34-19.03-3.77 c-6.09-2.52-11.57-6.22-16.16-10.81l-0.01-0.01c-4.59-4.59-8.29-10.07-10.81-16.16c-0.78-1.89-1.45-3.83-2-5.82 c1.04,0.1,2.1,0.15,3.17,0.15c2.03,0,4.01-0.18,5.94-0.53c0.32,0.96,0.67,1.91,1.05,2.84c2.07,5,5.11,9.51,8.9,13.29 c3.78,3.78,8.29,6.82,13.29,8.9c4.81,1.99,10.11,3.1,15.66,3.1c5.56,0,10.85-1.1,15.66-3.1c5-2.07,9.51-5.11,13.29-8.9 c3.78-3.78,6.82-8.29,8.9-13.29c1.99-4.81,3.1-10.11,3.1-15.66c0-5.56-1.1-10.85-3.1-15.66c-2.07-5-5.11-9.51-8.9-13.29 c-3.78-3.78-8.29-6.82-13.29-8.9c-4.81-1.99-10.11-3.1-15.66-3.1c-5.56,0-10.85,1.1-15.66,3.1c-0.43,0.18-0.86,0.37-1.28,0.56 c-1.64-2.58-3.62-4.92-5.89-6.95c1.24-0.64,2.51-1.23,3.8-1.77C59.94,1.34,66.37,0,73.1,0L73.1,0z M67.38,26.12 c0-1.22,0.5-2.33,1.3-3.13c0.8-0.8,1.9-1.3,3.12-1.3c1.22,0,2.33,0.5,3.13,1.3c0.8,0.8,1.3,1.91,1.3,3.13v23.22l17.35,10.29 c1.04,0.62,1.74,1.6,2.03,2.7c0.28,1.09,0.15,2.29-0.47,3.34c-0.62,1.04-1.6,1.74-2.7,2.03c-1.09,0.28-2.29,0.15-3.33-0.47 L69.65,55.71c-0.67-0.37-1.22-0.91-1.62-1.55c-0.41-0.67-0.65-1.46-0.65-2.3V26.12L67.38,26.12z"
+              /><path
+                class="st1"
+                d="M26.99,2.56c14.91,0,26.99,12.08,26.99,26.99c0,14.91-12.08,26.99-26.99,26.99C12.08,56.54,0,44.45,0,29.55 C0,14.64,12.08,2.56,26.99,2.56L26.99,2.56z M15.05,30.27c0.36-2.1,2.76-3.27,4.65-2.13c0.17,0.1,0.34,0.22,0.49,0.36l0.02,0.01 c0.85,0.81,1.8,1.66,2.74,2.5l0.81,0.73l9.59-10.06c0.57-0.6,0.99-0.99,1.85-1.18c2.94-0.65,5.01,2.95,2.93,5.15L26.17,38.19 c-1.13,1.2-3.14,1.31-4.35,0.16c-0.69-0.64-1.45-1.3-2.21-1.96c-1.32-1.15-2.67-2.32-3.77-3.48 C15.18,32.25,14.89,31.17,15.05,30.27L15.05,30.27z"
+              /></g
+            ></svg
+          >
+        {:else if imminent}
+          <svg
+            version="1.1"
+            id="Layer_5"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            x="0px"
+            y="0px"
+            viewBox="0 0 122.88 99.56"
+            style="enable-background:new 0 0 122.88 99.56"
+            xml:space="preserve"
+            ><style type="text/css">
+              .st0 {
+                fill: var(--color-text);
+              }
+              .st3 {
+                fill-rule: evenodd;
+                clip-rule: evenodd;
+                fill: var(--color-warning);
+              }
+            </style><g
+              ><path
+                class="st0"
+                d="M73.1,0c6.73,0,13.16,1.34,19.03,3.78c6.09,2.52,11.57,6.22,16.16,10.81c4.59,4.58,8.28,10.06,10.81,16.17 c2.43,5.87,3.78,12.3,3.78,19.03c0,6.73-1.34,13.16-3.78,19.03c-2.52,6.09-6.22,11.58-10.81,16.16 c-4.58,4.59-10.06,8.28-16.17,10.81c-5.87,2.43-12.3,3.78-19.03,3.78c-6.73,0-13.16-1.34-19.03-3.77 c-6.09-2.52-11.57-6.22-16.16-10.81l-0.01-0.01c-4.59-4.59-8.29-10.07-10.81-16.16c-0.78-1.89-1.45-3.83-2-5.82 c1.04,0.1,2.1,0.15,3.17,0.15c2.03,0,4.01-0.18,5.94-0.53c0.32,0.96,0.67,1.91,1.05,2.84c2.07,5,5.11,9.51,8.9,13.29 c3.78,3.78,8.29,6.82,13.29,8.9c4.81,1.99,10.11,3.1,15.66,3.1c5.56,0,10.85-1.1,15.66-3.1c5-2.07,9.51-5.11,13.29-8.9 c3.78-3.78,6.82-8.29,8.9-13.29c1.99-4.81,3.1-10.11,3.1-15.66c0-5.56-1.1-10.85-3.1-15.66c-2.07-5-5.11-9.51-8.9-13.29 c-3.78-3.78-8.29-6.82-13.29-8.9c-4.81-1.99-10.11-3.1-15.66-3.1c-5.56,0-10.85,1.1-15.66,3.1c-0.43,0.18-0.86,0.37-1.28,0.56 c-1.64-2.58-3.62-4.92-5.89-6.95c1.24-0.64,2.51-1.23,3.8-1.77C59.94,1.34,66.37,0,73.1,0L73.1,0z M67.38,26.12 c0-1.22,0.5-2.33,1.3-3.13c0.8-0.8,1.9-1.3,3.12-1.3c1.22,0,2.33,0.5,3.13,1.3c0.8,0.8,1.3,1.91,1.3,3.13v23.22l17.35,10.29 c1.04,0.62,1.74,1.6,2.03,2.7c0.28,1.09,0.15,2.29-0.47,3.34c-0.62,1.04-1.6,1.74-2.7,2.03c-1.09,0.28-2.29,0.15-3.33-0.47 L69.65,55.71c-0.67-0.37-1.22-0.91-1.62-1.55c-0.41-0.67-0.65-1.46-0.65-2.3V26.12L67.38,26.12z"
+              /><path
+                class="st3"
+                d="M26.99,2.56c14.91,0,26.99,12.08,26.99,26.99c0,14.91-12.08,26.99-26.99,26.99C12.08,56.54,0,44.45,0,29.55 C0,14.64,12.08,2.56,26.99,2.56L26.99,2.56z M15.05,30.27c0.36-2.1,2.76-3.27,4.65-2.13c0.17,0.1,0.34,0.22,0.49,0.36l0.02,0.01 c0.85,0.81,1.8,1.66,2.74,2.5l0.81,0.73l9.59-10.06c0.57-0.6,0.99-0.99,1.85-1.18c2.94-0.65,5.01,2.95,2.93,5.15L26.17,38.19 c-1.13,1.2-3.14,1.31-4.35,0.16c-0.69-0.64-1.45-1.3-2.21-1.96c-1.32-1.15-2.67-2.32-3.77-3.48 C15.18,32.25,14.89,31.17,15.05,30.27L15.05,30.27z"
+              /></g
+            ></svg
+          >
+        {:else}
+          <svg
+            version="1.1"
+            id="Layer_2"
+            x="0px"
+            y="0px"
+            viewBox="0 0 122.88 100.6"
+            style="enable-background:new 0 0 122.88 100.6"
+            xml:space="preserve"
+            ><style type="text/css">
+              .st0 {
+                fill: var(--color-text);
+              }
+              .st2 {
+                fill-rule: evenodd;
+                clip-rule: evenodd;
+                fill: #d8453e;
+              }
+            </style><g
+              ><path
+                class="st0"
+                d="M72.58,0c6.8,0,13.3,1.36,19.23,3.81c6.16,2.55,11.7,6.29,16.33,10.92l0,0c4.63,4.63,8.37,10.17,10.92,16.34 c2.46,5.93,3.81,12.43,3.81,19.23c0,6.8-1.36,13.3-3.81,19.23c-2.55,6.16-6.29,11.7-10.92,16.33l0,0 c-4.63,4.63-10.17,8.37-16.34,10.92c-5.93,2.46-12.43,3.81-19.23,3.81c-6.8,0-13.3-1.36-19.23-3.81 c-6.15-2.55-11.69-6.28-16.33-10.92l-0.01-0.01c-4.64-4.64-8.37-10.17-10.92-16.33c-0.79-1.91-1.47-3.87-2.02-5.89 c1.05,0.1,2.12,0.15,3.2,0.15c2.05,0,4.05-0.19,6-0.54c0.32,0.97,0.67,1.93,1.06,2.87c2.09,5.05,5.17,9.6,8.99,13.43 c3.82,3.82,8.38,6.9,13.43,8.99c4.87,2.02,10.21,3.13,15.83,3.13c5.62,0,10.96-1.11,15.83-3.13c5.05-2.09,9.6-5.17,13.43-8.99 c3.82-3.82,6.9-8.38,8.99-13.43c2.02-4.87,3.13-10.21,3.13-15.83c0-5.62-1.11-10.96-3.13-15.83c-2.09-5.05-5.17-9.6-8.99-13.43 c-3.82-3.82-8.38-6.9-13.43-8.99c-4.87-2.02-10.21-3.13-15.83-3.13c-5.62,0-10.96,1.11-15.83,3.13c-0.44,0.18-0.87,0.37-1.3,0.56 c-1.65-2.61-3.66-4.97-5.95-7.02c1.25-0.65,2.53-1.24,3.84-1.79C59.28,1.36,65.78,0,72.58,0L72.58,0z M66.8,26.39 c0-1.23,0.5-2.35,1.31-3.16c0.81-0.81,1.93-1.31,3.16-1.31c1.23,0,2.35,0.5,3.16,1.31c0.81,0.81,1.31,1.93,1.31,3.16v23.47 l17.54,10.4c1.05,0.62,1.76,1.62,2.05,2.73c0.28,1.1,0.15,2.31-0.47,3.37l0,0.01l0,0c-0.62,1.05-1.62,1.76-2.73,2.05 c-1.1,0.28-2.31,0.15-3.37-0.47l-0.01,0l0,0L69.1,56.29c-0.67-0.38-1.24-0.92-1.64-1.57c-0.42-0.68-0.66-1.48-0.66-2.32V26.39 L66.8,26.39z"
+              /><path
+                class="st2"
+                d="M27.27,3.18c15.06,0,27.27,12.21,27.27,27.27c0,15.06-12.21,27.27-27.27,27.27C12.21,57.73,0,45.52,0,30.45 C0,15.39,12.21,3.18,27.27,3.18L27.27,3.18z M24.35,41.34h5.82v5.16h-5.82V41.34L24.35,41.34L24.35,41.34z M30.17,37.77h-5.82 c-0.58-7.07-1.8-11.56-1.8-18.63c0-2.61,2.12-4.72,4.72-4.72c2.61,0,4.72,2.12,4.72,4.72C32,26.2,30.76,30.7,30.17,37.77 L30.17,37.77L30.17,37.77L30.17,37.77z"
+              /></g
+            ></svg
+          >
+        {/if}
+        {dateDmy}
+      </span>
+    {/if}
+  </div>
+  <div class="complete">
+    {#if completed}
+      <button
+        class="btn primary primary-action"
+        aria-label="Deshacer completar"
+        title="Deshacer completar"
+        on:click|preventDefault={doUncomplete}
+        disabled={busy}
+      >
+        ↩️ Deshacer
+      </button>
+    {:else}
+      <button
+        class="btn primary primary-action"
+        aria-label="Completar"
+        title="Completar"
+        on:click|preventDefault={doComplete}
+        disabled={busy}
+        ><svg viewBox="0 0 96 96" xml:space="preserve"
+          ><g
+            ><path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              fill="#6BBE66"
+              class=""
+              d="M48,0c26.51,0,48,21.49,48,48S74.51,96,48,96S0,74.51,0,48 S21.49,0,48,0L48,0z M26.764,49.277c0.644-3.734,4.906-5.813,8.269-3.79c0.305,0.182,0.596,0.398,0.867,0.646l0.026,0.025 c1.509,1.446,3.2,2.951,4.876,4.443l1.438,1.291l17.063-17.898c1.019-1.067,1.764-1.757,3.293-2.101 c5.235-1.155,8.916,5.244,5.206,9.155L46.536,63.366c-2.003,2.137-5.583,2.332-7.736,0.291c-1.234-1.146-2.576-2.312-3.933-3.489 c-2.35-2.042-4.747-4.125-6.701-6.187C26.993,52.809,26.487,50.89,26.764,49.277L26.764,49.277z"
+            /></g
+          ></svg
+        >
+        Completar
+      </button>
+    {/if}
+  </div>
+  <div class="assignees-container">
+    {#if assigneesCount === 0}
+      <button
+        class="assignees-badge empty"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded="false"
+        aria-controls={"assignees-popover-" + id}
+        title="Sin responsables"
+        disabled
+        bind:this={assigneesButtonEl}
+      >
+        🙅
+      </button>
+    {:else}
+      <button
+        class="assignees-badge"
+        class:mine={isAssigned}
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded={showAssignees}
+        aria-controls={"assignees-popover-" + id}
+        title={assigneesAria}
+        aria-label={assigneesAria}
+        on:click|preventDefault={() => (showAssignees = true)}
+        bind:this={assigneesButtonEl}
+      >
+        <span class="icon" aria-hidden="true">
+          <svg viewBox="0 0 122.88 91.99" xml:space="preserve"
+            ><g
+              ><path
+                class="icon-btn-svg"
+                d="M45.13,35.29h-0.04c-7.01-0.79-16.42,0.01-20.78,0C17.04,35.6,9.47,41.91,5.02,51.3 c-2.61,5.51-3.3,9.66-3.73,15.55C0.42,72.79-0.03,78.67,0,84.47c1.43,9.03,12.88,6.35,13.85,0l1.39-18.2 c0.21-2.75,0.4-4.61,1.51-7.23c0.52-1.23,1.15-2.28,1.89-3.15l0.69,33.25l-0.39,2.78h31.49l-0.42-3.1l0.61-36.67 c3.2-1.29,5.96-1.89,8.39-1.99c-0.12,0.25-0.25,0.5-0.37,0.75c-2.61,5.51-3.3,9.66-3.73,15.55c-0.86,5.93-1.32,11.81-1.29,17.61 c1.43,9.03,12.88,6.35,13.85,0l1.39-18.2c0.21-2.75,0.4-4.61,1.51-7.23c0.52-1.23,1.15-2.28,1.89-3.15l0.69,33.25l-0.46,3.24h31.62 l-0.48-3.55l0.49-28.62v0.56l0.1-4.87c0.74,0.87,1.36,1.92,1.89,3.15c1.12,2.62,1.3,4.48,1.51,7.23l1.39,18.2 c1.34,8.68,13.85,8.85,13.85,0c0.03-5.81-0.42-11.68-1.29-17.61c-0.43-5.89-1.12-10.04-3.73-15.55 c-4.57-9.65-10.48-14.76-19.45-15.81c-5.53-0.45-14.82,0.06-20.36-0.1c-1.38,0.19-2.74,0.47-4.06,0.87 c-3.45-0.48-8.01-1.07-12.56-1.09C54.76,34.77,48.15,35.91,45.13,35.29L45.13,35.29z M88.3,0c9.01,0,16.32,7.31,16.32,16.32 c0,9.01-7.31,16.32-16.32,16.32c-9.01,0-16.32-7.31-16.32-16.32C71.98,7.31,79.29,0,88.3,0L88.3,0z M34.56,0 c9.01,0,16.32,7.31,16.32,16.32c0,9.01-7.31,16.32-16.32,16.32s-16.32-7.31-16.32-16.32C18.24,7.31,25.55,0,34.56,0L34.56,0z"
+              /></g
+            ></svg
+          ></span
+        >
+        <span class="count">{assigneesCount}</span>
+      </button>
+    {/if}
+  </div>
+  <div class="actions">
+    {#if !completed}
+      {#if !isAssigned}
+        <button
+          class="icon-btn secondary-action"
+          aria-label="Reclamar"
+          on:click|preventDefault={doClaim}
+          disabled={busy}
+          ><svg viewBox="0 0 121.2 122.88"
+            ><g
+              ><path
+                class="icon-btn-svg"
+                d="M66.17,24.52c9.78,12.13,14.55,26.46,13.93,39.58c-4.52-11.08-11.54-22.31-20.85-32.65l-3.12,3.12 c-0.35,0.35-0.93,0.35-1.28,0l-9.87-9.87c-0.35-0.35-0.35-0.93,0-1.28l3.03-3.03C37.4,11.2,25.96,4.37,14.75,0.13 c13.22-0.99,27.81,3.57,40.2,13.31l1.36-1.36c0.35-0.35,0.93-0.35,1.28,0l9.87,9.87c0.35,0.35,0.35,0.93,0,1.28L66.17,24.52 L66.17,24.52z M49.32,58.69v-4.05l19.11,2.04L49.32,58.69L49.32,58.69z M57.83,74.36l-2.87-2.87l14.96-12.07L57.83,74.36 L57.83,74.36z M111.77,35.18l2.32,5.02l-24.85,8.4L111.77,35.18L111.77,35.18z M92.26,20.63l5.19,1.91L85.82,46.05L92.26,20.63 L92.26,20.63z M102.7,57.6l18.5,11.47v53.81H25.73c19.44-19.44,46.04-25.61,61.42-52.24C92.99,60.52,91.01,49.7,102.7,57.6 L102.7,57.6z M44.6,27.81l7.99,7.99L9.64,78.76c-2.2,2.2-5.8,2.2-7.99,0l0,0c-2.2-2.2-2.2-5.8,0-7.99L44.6,27.81L44.6,27.81z"
+              /></g
+            ></svg
+          >
+          Reclamar</button
+        >
+      {:else}
+        <button
+          class="icon-btn secondary-action"
+          aria-label="Soltar"
+          title="Soltar"
+          on:click|preventDefault={doUnassign}
+          disabled={busy}
+          ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.01 122.88">
+            <path
+              class="icon-btn-svg"
+              d="M.5,0H15a.51.51,0,0,1,.5.5V83.38L35.16,82h.22l.24,0c2.07-.14,3.65-.26,4.73-1.23l1.86-2.17a1.12,1.12,0,0,1,1.49-.18l9.35,6.28a1.15,1.15,0,0,1,.49,1c0,.55-.19.7-.61,1.08A11.28,11.28,0,0,0,51.78,88a27.27,27.27,0,0,1-3,3.1,15.84,15.84,0,0,1-3.68,2.45c-2.8,1.36-5.45,1.54-8.59,1.76l-.24,0-.21,0L15.5,96.77v25.61a.52.52,0,0,1-.5.5H.5a.51.51,0,0,1-.5-.5V.5A.5.5,0,0,1,.5,0ZM46,59.91l9-19.12-.89-.25a12.43,12.43,0,0,0-4.77-.82c-1.9.28-3.68,1.42-5.67,2.7-.83.53-1.69,1.09-2.62,1.63-.7.33-1.51.86-2.19,1.25l-8.7,5a1.11,1.11,0,0,1-1.51-.42l-5.48-9.64a1.1,1.1,0,0,1,.42-1.51c3.43-2,7.42-4,10.75-6.14,4-2.49,7.27-4.48,11.06-5.42s8-.8,13.89,1c2.12.59,4.55,1.48,6.55,2.2,1,.35,1.8.66,2.44.87,9.86,3.29,13.19,9.66,15.78,14.6,1.12,2.13,2.09,4,3.34,5,.51.42,1.67.27,3,.09a21.62,21.62,0,0,1,2.64-.23c4.32-.41,8.66-.66,13-1a1.1,1.1,0,0,1,1.18,1L108,61.86A1.11,1.11,0,0,1,107,63L95,63.9c-5.33.38-9.19.66-15-2.47l-.12-.07a23.23,23.23,0,0,1-7.21-8.5l0,0L65.73,68.4a63.9,63.9,0,0,0,5.85,5.32c6,5,11,9.21,9.38,20.43a23.89,23.89,0,0,1-.65,2.93c-.27,1-.56,1.9-.87,2.84-2.29,6.54-4.22,13.5-6.29,20.13a1.1,1.1,0,0,1-1,.81l-11.66.78a1,1,0,0,1-.39,0,1.12,1.12,0,0,1-.75-1.38c2.45-8.12,5-16.25,7.39-24.38a29,29,0,0,0,.87-3,7,7,0,0,0,.08-2.65l0-.24a4.16,4.16,0,0,0-.73-2.22,53.23,53.23,0,0,0-8.76-5.57c-3.75-2.07-7.41-4.08-10.25-7a12.15,12.15,0,0,1-3.59-7.36A14.76,14.76,0,0,1,46,59.91ZM80.07,6.13a12.29,12.29,0,0,1,13.1,11.39v0a12.29,12.29,0,0,1-24.52,1.72v0A12.3,12.3,0,0,1,80,6.13ZM3.34,35H6.69V51.09H3.34V35Z"
+            /></svg
+          >
+          Soltar</button
+        >
+      {/if}
 
-			{#if !editingText}
-				<button
-					class="icon-btn secondary-action"
-					aria-label="Editar texto"
-					title="Editar texto"
-					on:click|preventDefault={toggleEditText}
-					disabled={busy}
-				>
-					✍️ Editar</button
-				>
-			{:else}
-				<button
-					class="btn primary secondary-action"
-					on:click|preventDefault={saveText}
-					disabled={busy}>Guardar</button
-				>
-				<button
-					class="btn ghost secondary-action"
-					on:click|preventDefault={cancelText}
-					disabled={busy}>Cancelar</button
-				>
-			{/if}
+      {#if !editingText}
+        <button
+          class="icon-btn secondary-action"
+          aria-label="Editar texto"
+          title="Editar texto"
+          on:click|preventDefault={toggleEditText}
+          disabled={busy}
+          ><svg viewBox="0 0 121.48 122.88"
+            ><g
+              ><path
+                class="icon-btn-svg"
+                d="M96.84,2.22l22.42,22.42c2.96,2.96,2.96,7.8,0,10.76l-12.4,12.4L73.68,14.62l12.4-12.4 C89.04-0.74,93.88-0.74,96.84,2.22L96.84,2.22z M70.18,52.19L70.18,52.19l0,0.01c0.92,0.92,1.38,2.14,1.38,3.34 c0,1.2-0.46,2.41-1.38,3.34v0.01l-0.01,0.01L40.09,88.99l0,0h-0.01c-0.26,0.26-0.55,0.48-0.84,0.67h-0.01 c-0.3,0.19-0.61,0.34-0.93,0.45c-1.66,0.58-3.59,0.2-4.91-1.12h-0.01l0,0v-0.01c-0.26-0.26-0.48-0.55-0.67-0.84v-0.01 c-0.19-0.3-0.34-0.61-0.45-0.93c-0.58-1.66-0.2-3.59,1.11-4.91v-0.01l30.09-30.09l0,0h0.01c0.92-0.92,2.14-1.38,3.34-1.38 c1.2,0,2.41,0.46,3.34,1.38L70.18,52.19L70.18,52.19L70.18,52.19z M45.48,109.11c-8.98,2.78-17.95,5.55-26.93,8.33 C-2.55,123.97-2.46,128.32,3.3,108l9.07-32v0l-0.03-0.03L67.4,20.9l33.18,33.18l-55.07,55.07L45.48,109.11L45.48,109.11z M18.03,81.66l21.79,21.79c-5.9,1.82-11.8,3.64-17.69,5.45c-13.86,4.27-13.8,7.13-10.03-6.22L18.03,81.66L18.03,81.66z"
+              /></g
+            ></svg
+          >
+          Editar</button
+        >
+      {:else}
+        <button
+          class="btn primary secondary-action"
+          on:click|preventDefault={saveText}
+          disabled={busy}>Guardar</button
+        >
+        <button
+          class="btn ghost secondary-action"
+          on:click|preventDefault={cancelText}
+          disabled={busy}>Cancelar</button
+        >
+      {/if}
 
-			{#if !editing}
-				<button
-					class="icon-btn secondary-action"
-					aria-label="Editar fecha"
-					title="Editar fecha"
-					on:click|preventDefault={toggleEdit}
-					disabled={busy}><Hourglass size={16} /> Fecha</button
-				>
-			{:else}
-				<input class="date" type="date" bind:value={dateValue} />
-				<button
-					class="btn primary secondary-action"
-					on:click|preventDefault={saveDate}
-					disabled={busy}>Guardar</button
-				>
-				<button
-					class="btn danger secondary-action"
-					on:click|preventDefault={clearDate}
-					disabled={busy}>Quitar</button
-				>
-				<button
-					class="btn ghost secondary-action"
-					on:click|preventDefault={toggleEdit}
-					disabled={busy}>Cancelar</button
-				>
-			{/if}
-		{/if}
-	</div>
-	<Popover
-		bind:open={showAssignees}
-		ariaLabel="Responsables"
-		id={"assignees-popover-" + id}
-	>
-		<h3 class="popover-title">Responsables</h3>
-		{#if assigneesCount === 0}
-			<p class="muted">No hay responsables asignados.</p>
-		{:else}
-			<ul class="assignees-list">
-				{#each assignees as a}
-					<li>
-						<a
-							href={buildWaMeUrl(normalizeDigits(a))}
-							target="_blank"
-							rel="noopener noreferrer nofollow"
-						>
-							{normalizeDigits(a)}
-						</a>
-						{#if currentUserId && normalizeDigits(a) === normalizeDigits(currentUserId)}
-							<span class="you-pill">tú</span>
-						{/if}
-					</li>
-				{/each}
-			</ul>
-		{/if}
-		<div class="popover-actions">
-			<button class="btn ghost" on:click={() => (showAssignees = false)}
-				>Cerrar</button
-			>
-		</div>
-	</Popover>
+      {#if !editing}
+        <button
+          class="icon-btn secondary-action"
+          aria-label="Editar fecha"
+          title="Editar fecha"
+          on:click|preventDefault={toggleEdit}
+          disabled={busy}
+          ><svg viewBox="0 0 110.01 122.88" xml:space="preserve"
+            ><g
+              ><path
+                class="icon-btn-svg"
+                d="M1.87,14.69h22.66L24.5,14.3V4.13C24.5,1.86,26.86,0,29.76,0c2.89,0,5.26,1.87,5.26,4.13V14.3l-0.03,0.39 h38.59l-0.03-0.39V4.13C73.55,1.86,75.91,0,78.8,0c2.89,0,5.26,1.87,5.26,4.13V14.3l-0.03,0.39h24.11c1.03,0,1.87,0.84,1.87,1.87 v19.46c0,1.03-0.84,1.87-1.87,1.87H1.87C0.84,37.88,0,37.04,0,36.01V16.55C0,15.52,0.84,14.69,1.87,14.69L1.87,14.69z M71.6,74.59 c2.68-0.02,4.85,2.14,4.85,4.82c-0.01,2.68-2.19,4.87-4.87,4.89l-11.76,0.08l-0.08,11.77c-0.02,2.66-2.21,4.81-4.89,4.81 c-2.68-0.01-4.84-2.17-4.81-4.83l0.08-11.69L38.4,84.54c-2.68,0.02-4.85-2.14-4.85-4.82c0.01-2.68,2.19-4.88,4.87-4.9l11.76-0.08 l0.08-11.77c0.02-2.66,2.21-4.82,4.89-4.81c2.68,0,4.83,2.16,4.81,4.82l-0.08,11.69L71.6,74.59L71.6,74.59L71.6,74.59z M0.47,42.19 h109.08c0.26,0,0.46,0.21,0.46,0.46l0,0v79.76c0,0.25-0.21,0.46-0.46,0.46l-109.08,0c-0.25,0-0.46-0.21-0.46-0.46V42.66 C0,42.4,0.21,42.19,0.47,42.19L0.47,42.19L0.47,42.19z M8.84,50.58h93.84c0.52,0,0.94,0.45,0.94,0.94v62.85 c0,0.49-0.45,0.94-0.94,0.94H8.39c-0.49,0-0.94-0.42-0.94-0.94v-62.4c0-1.03,0.84-1.86,1.86-1.86L8.84,50.58L8.84,50.58z M78.34,29.87c2.89,0,5.26-1.87,5.26-4.13V15.11l-0.03-0.41H73.11l-0.03,0.41v10.16c0,2.27,2.36,4.13,5.25,4.13L78.34,29.87 L78.34,29.87z M29.29,29.87c2.89,0,5.26-1.87,5.26-4.13V15.11l-0.03-0.41H24.06l-0.03,0.41v10.16c0,2.27,2.36,4.13,5.25,4.13V29.87 L29.29,29.87z"
+              /></g
+            ></svg
+          >
+          Fecha</button
+        >
+      {:else}
+        <input class="date" type="date" bind:value={dateValue} />
+        <button
+          class="btn primary secondary-action"
+          on:click|preventDefault={saveDate}
+          disabled={busy}>Guardar</button
+        >
+        <button
+          class="btn danger secondary-action"
+          on:click|preventDefault={clearDate}
+          disabled={busy}>Quitar</button
+        >
+        <button
+          class="btn ghost secondary-action"
+          on:click|preventDefault={toggleEdit}
+          disabled={busy}>Cancelar</button
+        >
+      {/if}
+    {/if}
+  </div>
+  <Popover
+    bind:open={showAssignees}
+    ariaLabel="Responsables"
+    id={"assignees-popover-" + id}
+  >
+    <h3 class="popover-title">Responsables</h3>
+    {#if assigneesCount === 0}
+      <p class="muted">No hay responsables asignados.</p>
+    {:else}
+      <ul class="assignees-list">
+        {#each assignees as a}
+          <li>
+            <a
+              href={buildWaMeUrl(normalizeDigits(a))}
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+            >
+              {normalizeDigits(a)}
+            </a>
+            {#if currentUserId && normalizeDigits(a) === normalizeDigits(currentUserId)}
+              <span class="you-pill">tú</span>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <div class="popover-actions">
+      <button class="btn ghost" on:click={() => (showAssignees = false)}
+        >Cerrar</button
+      >
+    </div>
+  </Popover>
 </li>
 
 <style>
-	.task {
-		display: grid;
-		grid-template-columns: 1fr max-content;
-		grid-template-rows: min-content max-content max-content max-content;
-		grid-gap: 2px;
-		padding: 4px 0 8px 0;
-		border-bottom: 2px dashed var(--color-border);
-		position: relative;
-		margin: 0 0 4px 0;
-	}
-	.task:last-child {
-		border-bottom: 0;
-	}
-	.code {
-		font-weight: 300;
-		font-size: 0.8rem;
-		color: var(--color-text-muted);
-		font-family: monospace;
-		letter-spacing: 0.5px;
-		grid-row: 1/2;
-		grid-column: 1/2;
-		align-self: center;
-	}
-	.completed {
-		opacity: 0.5;
-	}
-	.desc {
-		padding: 8px 4px;
-		grid-column: 1/3;
-		grid-row: 2/3;
-	}
+  .task {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    grid-template-rows: min-content max-content max-content max-content;
+    grid-gap: 2px;
+    padding: 4px 0 8px 0;
+    border-bottom: 2px dashed var(--color-border);
+    position: relative;
+    margin: 0 0 4px 0;
+  }
+  .task:last-child {
+    border-bottom: 0;
+  }
+  .code {
+    font-weight: 300;
+    font-size: 0.8rem;
+    color: var(--color-text-muted);
+    font-family: monospace;
+    letter-spacing: 0.5px;
+    grid-row: 1/2;
+    grid-column: 1/2;
+    align-self: center;
+  }
+  .completed {
+    opacity: 0.5;
+  }
+  .desc {
+    padding: 8px 4px;
+    grid-column: 1/3;
+    grid-row: 2/3;
+  }
 
-	.desc.editing {
-		outline: 2px solid var(--color-primary);
-		outline-offset: 2px;
-		background: var(--color-surface);
-		padding: 2px 4px;
-		border-radius: 4px;
-		white-space: normal;
-		text-overflow: clip;
-		grid-column: 1/3;
-		grid-row: 2/3;
-		margin: 16px 0;
-	}
-	.desc.completed {
-		text-decoration: line-through;
-	}
-	.meta {
-		justify-self: end;
-		align-items: start;
-		grid-row: 1/2;
-		grid-column: 2/3;
-		display: inline-flex;
-		gap: 6px;
-		align-items: center;
-	}
-	.muted {
-		color: var(--color-text-muted);
-	}
-	.group-badge {
-		padding: 2px 6px;
-		border-radius: 999px;
-		border: 1px solid var(--gc-border, var(--color-border));
-		background: var(--gc-bg, transparent);
-		color: var(--gc-text, inherit);
-		font-size: 12px;
-	}
-	.date-badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		padding: 4px 6px;
-		border-radius: 6px;
-		border: 1px solid transparent;
-		font-size: 12px;
-	}
-	.date-badge.overdue {
-		border-color: var(--color-danger);
-	}
-	.date-badge.soon {
-		border-color: var(--color-warning);
-	}
-	.assignees-container {
-		grid-row: 4/5;
-		grid-column: 1/2;
-	}
-	.task.completed {
-		opacity: 0.7;
-	}
-	.complete {
-		grid-row: 3/4;
-		grid-column: 2/3;
-		justify-self: end;
-	}
-	.actions {
-		justify-self: stretch;
-		grid-column: 2/3;
-		grid-row: 4/5;
-		margin: 2px 0 4px 0;
-		display: flex;
-		flex-wrap: nowrap;
-		gap: 6px;
-		align-items: center;
-		justify-content: flex-end;
-	}
-	.btn {
-		padding: 4px 8px;
-		border: 1px solid var(--color-border);
-		background: var(--color-surface);
-		color: var(--color-text);
-		border-radius: 6px;
-		font-size: 13px;
-		cursor: pointer;
-		font-family: monospace;
-	}
-	.btn[disabled] {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-	.btn.primary {
-		border-color: transparent;
-		background: var(--color-primary);
-		color: #fff;
-	}
-	.btn.ghost {
-		background: transparent;
-	}
-	.btn.danger {
-		background: var(--color-danger);
-		color: #fff;
-		border-color: transparent;
-	}
-	.icon-btn {
-		padding: 6px 8px;
-		border: 1px solid var(--color-border);
-		border-radius: 6px;
-		background: var(--color-surface);
-		font-size: 12px;
-		line-height: 1;
-		font-family: monospace;
-	}
-	.date {
-		padding: 4px 6px;
-		font-size: 14px;
-	}
-	@media (max-width: 768px) {
-		.actions {
-			justify-self: stretch;
-		}
-		.actions .secondary-action {
-			flex: 0 0 auto;
-		}
-		/* Botón de completar a ancho completo en mobile */
-		.complete {
-			grid-column: 1/3;
-			justify-self: stretch;
-		}
-		.complete .btn {
-			width: 100%;
-		}
-	}
-	@media (max-width: 480px) {
-		.task {
-			grid-template-columns: 1fr;
-		}
-		.meta {
-			justify-self: end;
-		}
-		/* En 1 columna, colocamos acciones en una fila propia bajo el badge */
-		.actions {
-			grid-row: 4/5;
-			grid-column: 1/3;
-			justify-self: flex-end;
-		}
-		.icon-btn {
-			padding: 2px;
-		}
-	}
+  .desc.editing {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    background: var(--color-surface);
+    padding: 2px 4px;
+    border-radius: 4px;
+    white-space: normal;
+    text-overflow: clip;
+    grid-column: 1/3;
+    grid-row: 2/3;
+    margin: 16px 0;
+  }
+  .desc.completed {
+    text-decoration: line-through;
+  }
+  .meta {
+    justify-self: end;
+    align-items: start;
+    grid-row: 1/2;
+    grid-column: 2/3;
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .muted {
+    color: var(--color-text-muted);
+  }
+  .group-badge {
+    padding: 2px 6px;
+    border-radius: 6px;
+    border: 1px solid var(--gc-border, var(--color-border));
+    background: var(--gc-bg, transparent);
+    color: var(--gc-text, inherit);
+    font-size: 12px;
+  }
+  .date-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 6px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    font-size: 12px;
+  }
+  .date-badge img {
+    max-height: 1rem;
+    min-width: 1.2rem;
+  }
+  .date-badge.overdue {
+    border-color: var(--color-danger);
+  }
+  .date-badge.soon {
+    border-color: var(--color-warning);
+  }
+  .assignees-container {
+    grid-row: 4/5;
+    grid-column: 1/2;
+  }
+  .task.completed {
+    opacity: 0.7;
+  }
+  .complete {
+    grid-row: 3/4;
+    grid-column: 2/3;
+    justify-self: end;
+  }
+  .actions {
+    justify-self: stretch;
+    grid-column: 2/3;
+    grid-row: 4/5;
+    margin: 2px 0 4px 0;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 6px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .btn {
+    padding: 4px 8px;
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+    border-radius: 6px;
+    font-size: 13px;
+    cursor: pointer;
+    font-family: monospace;
+    box-shadow: 0 0 8px 4px var(--color-border);
+    margin-bottom: 4px;
+  }
+  .btn[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .btn.primary {
+    border-color: var(--color-primary);
+    background: var(--color-primary-muted);
+    color: #fff;
+  }
+  .btn.primary svg {
+    margin-right: 8px;
+  }
+  .btn.ghost {
+    background: transparent;
+  }
+  .btn.danger {
+    background: var(--color-danger);
+    color: #fff;
+    border-color: transparent;
+  }
+  .icon-btn {
+    border: 1px solid var(--color-surface);
+    border-radius: 6px;
+    background: var(--color-surface);
+    font-size: 12px;
+    line-height: 1;
+    font-family: monospace;
+    box-shadow: 0 0 8px 4px var(--color-border);
+  }
+  .icon-btn svg {
+    margin-right: 8px;
+  }
+  .date {
+    padding: 4px 6px;
+    font-size: 14px;
+  }
+  @media (max-width: 768px) {
+    .actions {
+      justify-self: stretch;
+    }
+    .actions .secondary-action {
+      flex: 0 0 auto;
+    }
+    /* Botón de completar a ancho completo en mobile */
+    .complete {
+      grid-column: 1/3;
+      justify-self: stretch;
+    }
+    .complete .btn {
+      width: 100%;
+    }
+  }
+  @media (max-width: 480px) {
+    .task {
+      grid-template-columns: 1fr;
+    }
+    .meta {
+      justify-self: end;
+    }
+    /* En 1 columna, colocamos acciones en una fila propia bajo el badge */
+    .actions {
+      grid-row: 4/5;
+      grid-column: 1/3;
+      justify-self: flex-end;
+    }
+    .icon-btn {
+      padding: 2px;
+    }
+  }
 
-	/* Badge de responsables */
-	.assignees-badge {
-		display: inline-flex;
-		align-items: center;
-		justify-self: start;
-		gap: 6px;
-		padding: 2px 8px;
-		border-radius: 999px;
-		border: 1px solid var(--color-border);
-		background: var(--color-surface);
-		font-size: 12px;
-		cursor: pointer;
-	}
-	.assignees-badge .icon {
-		font-size: 16px;
-		line-height: 1;
-	}
-	.assignees-badge .count {
-		font-size: 12px;
-		line-height: 1;
-	}
-	.assignees-badge.mine {
-		border-color: var(--color-primary);
-		box-shadow: 0 0 0 2px var(--color-primary);
-	}
-	.assignees-badge.mine .icon {
-		position: relative;
-	}
-	.assignees-badge.mine .icon::after {
-		content: "";
-		position: absolute;
-		right: -2px;
-		top: -2px;
-		width: 6px;
-		height: 6px;
-		background: var(--color-primary);
-		border: 2px solid var(--color-surface);
-		border-radius: 50%;
-	}
-	.assignees-badge[aria-expanded="true"] {
-		border-color: var(--color-primary);
-	}
-	.assignees-badge:disabled {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
-	.assignees-badge.empty {
-		padding: 2px 6px;
-		gap: 0;
-	}
+  /* Badge de responsables */
+  .assignees-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-self: start;
+    gap: 8px;
+    padding: 2px 8px;
+    border-radius: 6px;
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    font-size: 12px;
+    cursor: pointer;
+    box-shadow: 0 0 4px 4px var(--color-border);
+  }
+  .assignees-badge .icon {
+    font-size: 16px;
+    line-height: 1;
+  }
+  .assignees-badge .count {
+    font-size: 12px;
+    line-height: 1;
+  }
+  .assignees-badge.mine {
+    border-color: var(--color-surface);
+  }
+  .assignees-badge.mine .icon {
+    position: relative;
+  }
+  .assignees-badge.mine .icon::after {
+    content: "";
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    width: 8px;
+    height: 8px;
+    background: var(--color-primary);
+    border: 1px solid var(--color-surface);
+    border-radius: 50%;
+  }
+  .assignees-badge[aria-expanded="true"] {
+    border-color: var(--color-primary);
+  }
+  .assignees-badge:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .assignees-badge.empty {
+    padding: 2px 6px;
+    gap: 0;
+  }
 
-	.assignees-list {
-		list-style: none;
-		margin: 8px 0;
-		padding: 0;
-	}
-	.assignees-list li {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 4px 0;
-	}
-	.assignees-list a {
-		color: var(--color-primary);
-		text-decoration: none;
-	}
-	.assignees-list a:hover,
-	.assignees-list a:focus-visible {
-		text-decoration: underline;
-	}
-	.popover-actions {
-		display: flex;
-		justify-content: flex-end;
-		margin-top: 8px;
-	}
-	.popover-title {
-		margin: 0 0 4px 0;
-		font-size: 0.95rem;
-	}
-	.you-pill {
-		margin-left: 6px;
-		padding: 1px 6px;
-		border-radius: 999px;
-		background: rgba(37, 99, 235, 0.12);
-		color: var(--color-primary);
-		font-size: 11px;
-	}
+  .assignees-list {
+    list-style: none;
+    margin: 8px 0;
+    padding: 0;
+  }
+  .assignees-list li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+  }
+  .assignees-list a {
+    color: var(--color-primary);
+    text-decoration: none;
+  }
+  .assignees-list a:hover,
+  .assignees-list a:focus-visible {
+    text-decoration: underline;
+  }
+  .popover-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 8px;
+  }
+  .popover-title {
+    margin: 0 0 4px 0;
+    font-size: 0.95rem;
+  }
+  .you-pill {
+    margin-left: 6px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: rgba(37, 99, 235, 0.12);
+    color: var(--color-primary);
+    font-size: 11px;
+  }
+  .icon-btn-svg {
+    fill-rule: evenodd;
+    clip-rule: evenodd;
+    fill: var(--color-text);
+  }
 </style>
diff --git a/apps/web/src/lib/ui/layout/AppShell.svelte b/apps/web/src/lib/ui/layout/AppShell.svelte
index f2e5a9f..d4fcb97 100644
--- a/apps/web/src/lib/ui/layout/AppShell.svelte
+++ b/apps/web/src/lib/ui/layout/AppShell.svelte
@@ -1,23 +1,39 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import Toast from '$lib/ui/feedback/Toast.svelte';
+  import { page } from "$app/stores";
+  import Toast from "$lib/ui/feedback/Toast.svelte";
   $: pathname = $page.url.pathname;
   $: currentTitle =
-    pathname === '/app' ? 'Tareas' :
-    pathname.startsWith('/app/groups') ? 'Grupos' :
-    pathname.startsWith('/app/preferences') ? 'Recordatorios' :
-    pathname.startsWith('/app/integrations') ? 'Calendarios' :
-    'Tareas';
+    pathname === "/app"
+      ? "Tareas"
+      : pathname.startsWith("/app/groups")
+        ? "Grupos"
+        : pathname.startsWith("/app/preferences")
+          ? "Recordatorios"
+          : pathname.startsWith("/app/integrations")
+            ? "Calendarios"
+            : "Tareas";
 </script>
 
 <header class="app-header">
   <div class="container row">
     <a class="brand" href="/app" aria-label="Inicio">Tareas</a>
     <nav class="nav">
-      <a href="/app" class:active={$page.url.pathname === '/app'}>Tareas</a>
-      <a href="/app/groups" class:active={$page.url.pathname.startsWith('/app/groups')}>Grupos</a>
-      <a href="/app/preferences" class:active={$page.url.pathname.startsWith('/app/preferences')}>Recordatorios</a>
-      <a href="/app/integrations" class="calendar" class:active={$page.url.pathname.startsWith('/app/integrations')}>Calendarios</a>
+      <a href="/app" class:active={$page.url.pathname === "/app"}>Tareas</a>
+      <a
+        href="/app/groups"
+        class:active={$page.url.pathname.startsWith("/app/groups")}>Grupos</a
+      >
+      <a
+        href="/app/preferences"
+        class:active={$page.url.pathname.startsWith("/app/preferences")}
+        >Recordatorios</a
+      >
+      <a
+        href="/app/integrations"
+        class="calendar"
+        class:active={$page.url.pathname.startsWith("/app/integrations")}
+        >Calendarios</a
+      >
     </nav>
     <form method="POST" action="/api/logout">
       <button type="submit" class="logout">Cerrar sesión</button>
@@ -39,23 +55,45 @@
 </main>
 
 <nav class="tabbar" aria-label="Navegación inferior">
-  <a href="/app" class:active={$page.url.pathname === '/app'} aria-label="Tareas">
+  <a
+    href="/app"
+    class:active={$page.url.pathname === "/app"}
+    aria-label="Tareas"
+  >
     <span class="icon">✅</span>
     <span class="label">Tareas</span>
   </a>
-  <a href="/app/groups" class:active={$page.url.pathname.startsWith('/app/groups')} aria-label="Grupos">
+  <a
+    href="/app/groups"
+    class:active={$page.url.pathname.startsWith("/app/groups")}
+    aria-label="Grupos"
+  >
     <span class="icon">👥</span>
     <span class="label">Grupos</span>
   </a>
-  <a href="/app/preferences" class:active={$page.url.pathname.startsWith('/app/preferences')} aria-label="Recordatorios">
+  <a
+    href="/app/preferences"
+    class:active={$page.url.pathname.startsWith("/app/preferences")}
+    aria-label="Recordatorios"
+  >
     <span class="icon">⏰</span>
     <span class="label">Recordatorios</span>
   </a>
-  <a href="/app/integrations" class="calendar" class:active={$page.url.pathname.startsWith('/app/integrations')} aria-label="Calendarios">
+  <a
+    href="/app/integrations"
+    class="calendar"
+    class:active={$page.url.pathname.startsWith("/app/integrations")}
+    aria-label="Calendarios"
+  >
     <span class="icon">📅</span>
     <span class="label">Calendarios</span>
   </a>
-  <form method="POST" action="/api/logout" class="logout-tab" aria-label="Salir">
+  <form
+    method="POST"
+    action="/api/logout"
+    class="logout-tab"
+    aria-label="Salir"
+  >
     <button type="submit">
       <span class="icon">🚪</span>
       <span class="label">Salir</span>
@@ -103,7 +141,7 @@
   }
   .nav a:hover,
   .nav a:focus-visible {
-    background: rgba(0,0,0,0.04);
+    background: rgba(0, 0, 0, 0.04);
   }
   .nav a.active {
     background: rgba(37, 99, 235, 0.12);
@@ -111,7 +149,7 @@
     font-weight: 600;
   }
   .nav a.active::after {
-    content: '';
+    content: "";
     position: absolute;
     left: 8px;
     right: 8px;
@@ -124,7 +162,7 @@
   @media (prefers-color-scheme: dark) {
     .nav a:hover,
     .nav a:focus-visible {
-      background: rgba(255,255,255,0.06);
+      background: rgba(255, 255, 255, 0.06);
     }
     .nav a.active {
       background: rgba(96, 165, 250, 0.14);
@@ -174,7 +212,8 @@
       color: inherit;
       text-decoration: none;
       background: transparent;
-      border: none;
+      border: 1px solid var(--color-surface);
+      box-shadow: 0 0 8px 4px var(--color-border);
     }
     .tabbar form.logout-tab {
       display: flex;
@@ -216,7 +255,9 @@
 
   /* Ocultar header y mostrar topbar en móvil */
   @media (max-width: 768px) {
-    .app-header { display: none; }
+    .app-header {
+      display: none;
+    }
     .mobile-topbar {
       display: block;
       position: sticky;
diff --git a/apps/web/src/routes/app/groups/+page.svelte b/apps/web/src/routes/app/groups/+page.svelte
index 9784862..4a34126 100644
--- a/apps/web/src/routes/app/groups/+page.svelte
+++ b/apps/web/src/routes/app/groups/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import TaskItem from '$lib/ui/data/TaskItem.svelte';
-  import Card from '$lib/ui/layout/Card.svelte';
-  import { onMount } from 'svelte';
+  import TaskItem from "$lib/ui/data/TaskItem.svelte";
+  import Card from "$lib/ui/layout/Card.svelte";
+  import { onMount } from "svelte";
 
   type GroupItem = {
     id: string;
@@ -17,17 +17,22 @@
     assignees?: string[];
   };
 
-  export let data: { userId: string | null; groups: GroupItem[]; itemsByGroup: Record<string, Task[]>; unassignedFirst?: boolean };
+  export let data: {
+    userId: string | null;
+    groups: GroupItem[];
+    itemsByGroup: Record<string, Task[]>;
+    unassignedFirst?: boolean;
+  };
   const groups = data.groups || [];
   const itemsByGroup = data.itemsByGroup || {};
 
   function buildQuery(params: { unassignedFirst?: boolean }) {
     const sp = new URLSearchParams();
-    if (params.unassignedFirst) sp.set('unassignedFirst', 'true');
+    if (params.unassignedFirst) sp.set("unassignedFirst", "true");
     return sp.toString();
   }
 
-  const storageKey = `groupsCollapsed:v1:${data.userId ?? 'anon'}`;
+  const storageKey = `groupsCollapsed:v1:${data.userId ?? "anon"}`;
   let collapsed: Record<string, boolean> = {};
 
   function hasTasks(groupId: string): boolean {
@@ -42,13 +47,13 @@
 
   function isOpen(groupId: string): boolean {
     const v = collapsed[groupId];
-    if (typeof v === 'boolean') return !v;
+    if (typeof v === "boolean") return !v;
     return !defaultCollapsedFor(groupId);
   }
 
   function saveCollapsed() {
     try {
-      const currentIds = new Set(groups.map(g => g.id));
+      const currentIds = new Set(groups.map((g) => g.id));
       const pruned: Record<string, boolean> = {};
       for (const id of Object.keys(collapsed)) {
         if (currentIds.has(id)) pruned[id] = !!collapsed[id];
@@ -68,9 +73,12 @@
       const raw = localStorage.getItem(storageKey);
       const saved = raw ? JSON.parse(raw) : {};
       const map: Record<string, boolean> = {};
-      const currentIds = new Set(groups.map(g => g.id));
+      const currentIds = new Set(groups.map((g) => g.id));
       for (const g of groups) {
-        map[g.id] = typeof saved?.[g.id] === 'boolean' ? !!saved[g.id] : defaultCollapsedFor(g.id);
+        map[g.id] =
+          typeof saved?.[g.id] === "boolean"
+            ? !!saved[g.id]
+            : defaultCollapsedFor(g.id);
       }
       // Limpieza de claves obsoletas en storage
       const cleaned: Record<string, boolean> = {};
@@ -112,17 +120,21 @@
   </div>
 
   {#each groups as g}
-    <details class="group" open={isOpen(g.id)} on:toggle={(e) => handleToggle(g.id, e)}>
+    <details
+      class="group"
+      open={isOpen(g.id)}
+      on:toggle={(e) => handleToggle(g.id, e)}
+    >
       <summary class="group-header">
         <span class="name">{g.name ?? g.id}</span>
         <span class="counts">
-          <span class="badge">abiertas: {g.counts.open}</span>
-          <span class="badge warn">sin responsable: {g.counts.unassigned}</span>
+          <span class="badge">tareas: {g.counts.open}</span>
+          <span class="badge warn">🙅‍♂️: {g.counts.unassigned}</span>
         </span>
       </summary>
       <Card>
         <ul class="list">
-          {#each (itemsByGroup[g.id] || []) as t}
+          {#each itemsByGroup[g.id] || [] as t}
             <TaskItem
               id={t.id}
               description={t.description}
@@ -141,15 +153,21 @@
 {/if}
 
 <style>
-  .title { margin-bottom: .75rem; }
+  .title {
+    margin-bottom: 0.75rem;
+  }
   .toolbar {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
+  }
+  .toggle {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
   }
-  .toggle { display: inline-flex; gap: 6px; align-items: center; }
   .group {
-    margin: .5rem 0;
+    margin: 0.5rem 0;
     border: 1px solid var(--color-border);
     border-radius: 8px;
     background: var(--color-surface);
@@ -157,13 +175,18 @@
   .group-header {
     display: flex;
     justify-content: space-between;
-    padding: .5rem .75rem;
+    padding: 0.5rem 0.75rem;
     cursor: pointer;
     list-style: none;
     user-select: none;
   }
-  .group-header .name { font-weight: 600; }
-  .counts { display: inline-flex; gap: .5rem; }
+  .group-header .name {
+    font-weight: 600;
+  }
+  .counts {
+    display: inline-flex;
+    gap: 0.5rem;
+  }
   .badge {
     padding: 2px 8px;
     border: 1px solid var(--color-border);
@@ -175,7 +198,7 @@
   }
   .list {
     margin: 0;
-    padding: .25rem .5rem .5rem .5rem;
+    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
     list-style: none;
   }
 </style>
diff --git a/apps/web/static/delay-icon.svg b/apps/web/static/delay-icon.svg
new file mode 100644
index 0000000..7888f41
--- /dev/null
+++ b/apps/web/static/delay-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 100.6" style="enable-background:new 0 0 122.88 100.6" xml:space="preserve"><style type="text/css">.st0{fill:#272727;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D8453E;}</style><g><path class="st0" d="M72.58,0c6.8,0,13.3,1.36,19.23,3.81c6.16,2.55,11.7,6.29,16.33,10.92l0,0c4.63,4.63,8.37,10.17,10.92,16.34 c2.46,5.93,3.81,12.43,3.81,19.23c0,6.8-1.36,13.3-3.81,19.23c-2.55,6.16-6.29,11.7-10.92,16.33l0,0 c-4.63,4.63-10.17,8.37-16.34,10.92c-5.93,2.46-12.43,3.81-19.23,3.81c-6.8,0-13.3-1.36-19.23-3.81 c-6.15-2.55-11.69-6.28-16.33-10.92l-0.01-0.01c-4.64-4.64-8.37-10.17-10.92-16.33c-0.79-1.91-1.47-3.87-2.02-5.89 c1.05,0.1,2.12,0.15,3.2,0.15c2.05,0,4.05-0.19,6-0.54c0.32,0.97,0.67,1.93,1.06,2.87c2.09,5.05,5.17,9.6,8.99,13.43 c3.82,3.82,8.38,6.9,13.43,8.99c4.87,2.02,10.21,3.13,15.83,3.13c5.62,0,10.96-1.11,15.83-3.13c5.05-2.09,9.6-5.17,13.43-8.99 c3.82-3.82,6.9-8.38,8.99-13.43c2.02-4.87,3.13-10.21,3.13-15.83c0-5.62-1.11-10.96-3.13-15.83c-2.09-5.05-5.17-9.6-8.99-13.43 c-3.82-3.82-8.38-6.9-13.43-8.99c-4.87-2.02-10.21-3.13-15.83-3.13c-5.62,0-10.96,1.11-15.83,3.13c-0.44,0.18-0.87,0.37-1.3,0.56 c-1.65-2.61-3.66-4.97-5.95-7.02c1.25-0.65,2.53-1.24,3.84-1.79C59.28,1.36,65.78,0,72.58,0L72.58,0z M66.8,26.39 c0-1.23,0.5-2.35,1.31-3.16c0.81-0.81,1.93-1.31,3.16-1.31c1.23,0,2.35,0.5,3.16,1.31c0.81,0.81,1.31,1.93,1.31,3.16v23.47 l17.54,10.4c1.05,0.62,1.76,1.62,2.05,2.73c0.28,1.1,0.15,2.31-0.47,3.37l0,0.01l0,0c-0.62,1.05-1.62,1.76-2.73,2.05 c-1.1,0.28-2.31,0.15-3.37-0.47l-0.01,0l0,0L69.1,56.29c-0.67-0.38-1.24-0.92-1.64-1.57c-0.42-0.68-0.66-1.48-0.66-2.32V26.39 L66.8,26.39z"/><path class="st1" d="M27.27,3.18c15.06,0,27.27,12.21,27.27,27.27c0,15.06-12.21,27.27-27.27,27.27C12.21,57.73,0,45.52,0,30.45 C0,15.39,12.21,3.18,27.27,3.18L27.27,3.18z M24.35,41.34h5.82v5.16h-5.82V41.34L24.35,41.34L24.35,41.34z M30.17,37.77h-5.82 c-0.58-7.07-1.8-11.56-1.8-18.63c0-2.61,2.12-4.72,4.72-4.72c2.61,0,4.72,2.12,4.72,4.72C32,26.2,30.76,30.7,30.17,37.77 L30.17,37.77L30.17,37.77L30.17,37.77z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/static/edit-list-icon.svg b/apps/web/static/edit-list-icon.svg
new file mode 100644
index 0000000..56d9fc0
--- /dev/null
+++ b/apps/web/static/edit-list-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.86 122.88" style="enable-background:new 0 0 106.86 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M39.62,64.58c-1.46,0-2.64-1.41-2.64-3.14c0-1.74,1.18-3.14,2.64-3.14h34.89c1.46,0,2.64,1.41,2.64,3.14 c0,1.74-1.18,3.14-2.64,3.14H39.62L39.62,64.58z M46.77,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H7.33 c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.83,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18v50.14c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.31-0.72c-0.19-0.19-0.44-0.31-0.72-0.31H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.72c0.19,0.19,0.45,0.31,0.73,0.31H46.77L46.77,116.58z M98.7,74.34c-0.51-0.49-1.1-0.72-1.78-0.71 c-0.68,0.01-1.26,0.27-1.74,0.78l-3.91,4.07l10.97,10.59l3.95-4.11c0.47-0.48,0.67-1.1,0.66-1.78c-0.01-0.67-0.25-1.28-0.73-1.74 L98.7,74.34L98.7,74.34z M78.21,114.01c-1.45,0.46-2.89,0.94-4.33,1.41c-1.45,0.48-2.89,0.97-4.33,1.45 c-3.41,1.12-5.32,1.74-5.72,1.85c-0.39,0.12-0.16-1.48,0.7-4.81l2.71-10.45l0,0l20.55-21.38l10.96,10.55L78.21,114.01L78.21,114.01 z M39.62,86.95c-1.46,0-2.65-1.43-2.65-3.19c0-1.76,1.19-3.19,2.65-3.19h17.19c1.46,0,2.65,1.43,2.65,3.19 c0,1.76-1.19,3.19-2.65,3.19H39.62L39.62,86.95z M39.62,42.26c-1.46,0-2.64-1.41-2.64-3.14c0-1.74,1.18-3.14,2.64-3.14h34.89 c1.46,0,2.64,1.41,2.64,3.14c0,1.74-1.18,3.14-2.64,3.14H39.62L39.62,42.26z M24.48,79.46c2.06,0,3.72,1.67,3.72,3.72 c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72C20.76,81.13,22.43,79.46,24.48,79.46L24.48,79.46z M24.48,57.44 c2.06,0,3.72,1.67,3.72,3.72c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72C20.76,59.11,22.43,57.44,24.48,57.44 L24.48,57.44z M24.48,35.42c2.06,0,3.72,1.67,3.72,3.72c0,2.06-1.67,3.72-3.72,3.72c-2.06,0-3.72-1.67-3.72-3.72 C20.76,37.08,22.43,35.42,24.48,35.42L24.48,35.42z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/static/emergency-exit-icon.svg b/apps/web/static/emergency-exit-icon.svg
new file mode 100644
index 0000000..a9e69a8
--- /dev/null
+++ b/apps/web/static/emergency-exit-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.01 122.88"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>emergency-exit</title><path class="cls-1" d="M.5,0H15a.51.51,0,0,1,.5.5V83.38L35.16,82h.22l.24,0c2.07-.14,3.65-.26,4.73-1.23l1.86-2.17a1.12,1.12,0,0,1,1.49-.18l9.35,6.28a1.15,1.15,0,0,1,.49,1c0,.55-.19.7-.61,1.08A11.28,11.28,0,0,0,51.78,88a27.27,27.27,0,0,1-3,3.1,15.84,15.84,0,0,1-3.68,2.45c-2.8,1.36-5.45,1.54-8.59,1.76l-.24,0-.21,0L15.5,96.77v25.61a.52.52,0,0,1-.5.5H.5a.51.51,0,0,1-.5-.5V.5A.5.5,0,0,1,.5,0ZM46,59.91l9-19.12-.89-.25a12.43,12.43,0,0,0-4.77-.82c-1.9.28-3.68,1.42-5.67,2.7-.83.53-1.69,1.09-2.62,1.63-.7.33-1.51.86-2.19,1.25l-8.7,5a1.11,1.11,0,0,1-1.51-.42l-5.48-9.64a1.1,1.1,0,0,1,.42-1.51c3.43-2,7.42-4,10.75-6.14,4-2.49,7.27-4.48,11.06-5.42s8-.8,13.89,1c2.12.59,4.55,1.48,6.55,2.2,1,.35,1.8.66,2.44.87,9.86,3.29,13.19,9.66,15.78,14.6,1.12,2.13,2.09,4,3.34,5,.51.42,1.67.27,3,.09a21.62,21.62,0,0,1,2.64-.23c4.32-.41,8.66-.66,13-1a1.1,1.1,0,0,1,1.18,1L108,61.86A1.11,1.11,0,0,1,107,63L95,63.9c-5.33.38-9.19.66-15-2.47l-.12-.07a23.23,23.23,0,0,1-7.21-8.5l0,0L65.73,68.4a63.9,63.9,0,0,0,5.85,5.32c6,5,11,9.21,9.38,20.43a23.89,23.89,0,0,1-.65,2.93c-.27,1-.56,1.9-.87,2.84-2.29,6.54-4.22,13.5-6.29,20.13a1.1,1.1,0,0,1-1,.81l-11.66.78a1,1,0,0,1-.39,0,1.12,1.12,0,0,1-.75-1.38c2.45-8.12,5-16.25,7.39-24.38a29,29,0,0,0,.87-3,7,7,0,0,0,.08-2.65l0-.24a4.16,4.16,0,0,0-.73-2.22,53.23,53.23,0,0,0-8.76-5.57c-3.75-2.07-7.41-4.08-10.25-7a12.15,12.15,0,0,1-3.59-7.36A14.76,14.76,0,0,1,46,59.91ZM80.07,6.13a12.29,12.29,0,0,1,13.1,11.39v0a12.29,12.29,0,0,1-24.52,1.72v0A12.3,12.3,0,0,1,80,6.13ZM3.34,35H6.69V51.09H3.34V35Z"/></svg>
\ No newline at end of file
diff --git a/apps/web/static/friends-icon.svg b/apps/web/static/friends-icon.svg
new file mode 100644
index 0000000..0e2d7be
--- /dev/null
+++ b/apps/web/static/friends-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 91.99" style="enable-background:new 0 0 122.88 91.99" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M45.13,35.29h-0.04c-7.01-0.79-16.42,0.01-20.78,0C17.04,35.6,9.47,41.91,5.02,51.3 c-2.61,5.51-3.3,9.66-3.73,15.55C0.42,72.79-0.03,78.67,0,84.47c1.43,9.03,12.88,6.35,13.85,0l1.39-18.2 c0.21-2.75,0.4-4.61,1.51-7.23c0.52-1.23,1.15-2.28,1.89-3.15l0.69,33.25l-0.39,2.78h31.49l-0.42-3.1l0.61-36.67 c3.2-1.29,5.96-1.89,8.39-1.99c-0.12,0.25-0.25,0.5-0.37,0.75c-2.61,5.51-3.3,9.66-3.73,15.55c-0.86,5.93-1.32,11.81-1.29,17.61 c1.43,9.03,12.88,6.35,13.85,0l1.39-18.2c0.21-2.75,0.4-4.61,1.51-7.23c0.52-1.23,1.15-2.28,1.89-3.15l0.69,33.25l-0.46,3.24h31.62 l-0.48-3.55l0.49-28.62v0.56l0.1-4.87c0.74,0.87,1.36,1.92,1.89,3.15c1.12,2.62,1.3,4.48,1.51,7.23l1.39,18.2 c1.34,8.68,13.85,8.85,13.85,0c0.03-5.81-0.42-11.68-1.29-17.61c-0.43-5.89-1.12-10.04-3.73-15.55 c-4.57-9.65-10.48-14.76-19.45-15.81c-5.53-0.45-14.82,0.06-20.36-0.1c-1.38,0.19-2.74,0.47-4.06,0.87 c-3.45-0.48-8.01-1.07-12.56-1.09C54.76,34.77,48.15,35.91,45.13,35.29L45.13,35.29z M88.3,0c9.01,0,16.32,7.31,16.32,16.32 c0,9.01-7.31,16.32-16.32,16.32c-9.01,0-16.32-7.31-16.32-16.32C71.98,7.31,79.29,0,88.3,0L88.3,0z M34.56,0 c9.01,0,16.32,7.31,16.32,16.32c0,9.01-7.31,16.32-16.32,16.32s-16.32-7.31-16.32-16.32C18.24,7.31,25.55,0,34.56,0L34.56,0z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/static/mining-icon.svg b/apps/web/static/mining-icon.svg
new file mode 100644
index 0000000..9b58fab
--- /dev/null
+++ b/apps/web/static/mining-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 121.2 122.88" style="enable-background:new 0 0 121.2 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M66.17,24.52c9.78,12.13,14.55,26.46,13.93,39.58c-4.52-11.08-11.54-22.31-20.85-32.65l-3.12,3.12 c-0.35,0.35-0.93,0.35-1.28,0l-9.87-9.87c-0.35-0.35-0.35-0.93,0-1.28l3.03-3.03C37.4,11.2,25.96,4.37,14.75,0.13 c13.22-0.99,27.81,3.57,40.2,13.31l1.36-1.36c0.35-0.35,0.93-0.35,1.28,0l9.87,9.87c0.35,0.35,0.35,0.93,0,1.28L66.17,24.52 L66.17,24.52z M49.32,58.69v-4.05l19.11,2.04L49.32,58.69L49.32,58.69z M57.83,74.36l-2.87-2.87l14.96-12.07L57.83,74.36 L57.83,74.36z M111.77,35.18l2.32,5.02l-24.85,8.4L111.77,35.18L111.77,35.18z M92.26,20.63l5.19,1.91L85.82,46.05L92.26,20.63 L92.26,20.63z M102.7,57.6l18.5,11.47v53.81H25.73c19.44-19.44,46.04-25.61,61.42-52.24C92.99,60.52,91.01,49.7,102.7,57.6 L102.7,57.6z M44.6,27.81l7.99,7.99L9.64,78.76c-2.2,2.2-5.8,2.2-7.99,0l0,0c-2.2-2.2-2.2-5.8,0-7.99L44.6,27.81L44.6,27.81z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/static/on-time-icon.svg b/apps/web/static/on-time-icon.svg
new file mode 100644
index 0000000..d769744
--- /dev/null
+++ b/apps/web/static/on-time-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 99.56" style="enable-background:new 0 0 122.88 99.56" xml:space="preserve"><style type="text/css">.st0{fill:#393939;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#38AE48;}</style><g><path class="st0" d="M73.1,0c6.73,0,13.16,1.34,19.03,3.78c6.09,2.52,11.57,6.22,16.16,10.81c4.59,4.58,8.28,10.06,10.81,16.17 c2.43,5.87,3.78,12.3,3.78,19.03c0,6.73-1.34,13.16-3.78,19.03c-2.52,6.09-6.22,11.58-10.81,16.16 c-4.58,4.59-10.06,8.28-16.17,10.81c-5.87,2.43-12.3,3.78-19.03,3.78c-6.73,0-13.16-1.34-19.03-3.77 c-6.09-2.52-11.57-6.22-16.16-10.81l-0.01-0.01c-4.59-4.59-8.29-10.07-10.81-16.16c-0.78-1.89-1.45-3.83-2-5.82 c1.04,0.1,2.1,0.15,3.17,0.15c2.03,0,4.01-0.18,5.94-0.53c0.32,0.96,0.67,1.91,1.05,2.84c2.07,5,5.11,9.51,8.9,13.29 c3.78,3.78,8.29,6.82,13.29,8.9c4.81,1.99,10.11,3.1,15.66,3.1c5.56,0,10.85-1.1,15.66-3.1c5-2.07,9.51-5.11,13.29-8.9 c3.78-3.78,6.82-8.29,8.9-13.29c1.99-4.81,3.1-10.11,3.1-15.66c0-5.56-1.1-10.85-3.1-15.66c-2.07-5-5.11-9.51-8.9-13.29 c-3.78-3.78-8.29-6.82-13.29-8.9c-4.81-1.99-10.11-3.1-15.66-3.1c-5.56,0-10.85,1.1-15.66,3.1c-0.43,0.18-0.86,0.37-1.28,0.56 c-1.64-2.58-3.62-4.92-5.89-6.95c1.24-0.64,2.51-1.23,3.8-1.77C59.94,1.34,66.37,0,73.1,0L73.1,0z M67.38,26.12 c0-1.22,0.5-2.33,1.3-3.13c0.8-0.8,1.9-1.3,3.12-1.3c1.22,0,2.33,0.5,3.13,1.3c0.8,0.8,1.3,1.91,1.3,3.13v23.22l17.35,10.29 c1.04,0.62,1.74,1.6,2.03,2.7c0.28,1.09,0.15,2.29-0.47,3.34c-0.62,1.04-1.6,1.74-2.7,2.03c-1.09,0.28-2.29,0.15-3.33-0.47 L69.65,55.71c-0.67-0.37-1.22-0.91-1.62-1.55c-0.41-0.67-0.65-1.46-0.65-2.3V26.12L67.38,26.12z"/><path class="st1" d="M26.99,2.56c14.91,0,26.99,12.08,26.99,26.99c0,14.91-12.08,26.99-26.99,26.99C12.08,56.54,0,44.45,0,29.55 C0,14.64,12.08,2.56,26.99,2.56L26.99,2.56z M15.05,30.27c0.36-2.1,2.76-3.27,4.65-2.13c0.17,0.1,0.34,0.22,0.49,0.36l0.02,0.01 c0.85,0.81,1.8,1.66,2.74,2.5l0.81,0.73l9.59-10.06c0.57-0.6,0.99-0.99,1.85-1.18c2.94-0.65,5.01,2.95,2.93,5.15L26.17,38.19 c-1.13,1.2-3.14,1.31-4.35,0.16c-0.69-0.64-1.45-1.3-2.21-1.96c-1.32-1.15-2.67-2.32-3.77-3.48 C15.18,32.25,14.89,31.17,15.05,30.27L15.05,30.27z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/static/sand-clock-half-icon.svg b/apps/web/static/sand-clock-half-icon.svg
new file mode 100644
index 0000000..37754a1
--- /dev/null
+++ b/apps/web/static/sand-clock-half-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="105.765px" height="122.88px" viewBox="0 0 105.765 122.88" enable-background="new 0 0 105.765 122.88" xml:space="preserve"><g><path d="M82.872,90.81c-2.983-8.16-7.707-14.175-13.283-18.06c-3.772-2.629-7.914-4.284-12.133-4.97 c-4.236-0.686-8.583-0.408-12.747,0.828C35.573,71.323,27.33,78.716,22.903,90.81H82.872L82.872,90.81z M20.618,27.21h64.535 c0.346-2.922,1.154-13.713,1.119-16.995H19.497C19.462,13.498,20.27,24.288,20.618,27.21L20.618,27.21L20.618,27.21z M0.91,112.665 h9.567C10.222,85.12,22.648,68.03,38.027,61.466C22.637,54.9,10.205,37.79,10.478,10.214l-9.567,0c-0.501,0-0.909-0.46-0.909-1.025 L0,1.024C0,0.46,0.409,0,0.91,0h103.944c0.5,0,0.91,0.46,0.91,1.024v8.164c0,0.563-0.41,1.024-0.91,1.024h-9.57 c0.225,23.214-8.581,39.038-20.546,47.376c-2.188,1.522-4.543,2.832-6.994,3.873c2.446,1.049,4.81,2.354,6.992,3.88 c11.955,8.332,20.756,24.139,20.546,47.321l9.572,0.001c0.5,0,0.91,0.463,0.91,1.026v8.162c0,0.564-0.41,1.027-0.91,1.027H0.91 c-0.501,0-0.909-0.463-0.909-1.026v-8.162C0.001,113.128,0.41,112.665,0.91,112.665L0.91,112.665L0.91,112.665z"/></g></svg>
\ No newline at end of file
diff --git a/apps/web/static/time-expire-icon.svg b/apps/web/static/time-expire-icon.svg
new file mode 100644
index 0000000..06a1bb8
--- /dev/null
+++ b/apps/web/static/time-expire-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 406.6"><path d="M334.1 1.64a202.504 202.504 0 0 1 135.16 77.02c68.84 88.6 52.82 216.19-35.78 285.03-.08.05-.14.11-.22.18-88.57 68.82-216.15 52.81-284.97-35.76-.04-.06-.09-.12-.14-.17A204.822 204.822 0 0 1 125.31 291a168.69 168.69 0 0 0 37.79-5.42 172.61 172.61 0 0 0 13.55 20.29c56.7 72.81 161.67 85.86 234.46 29.15 72.8-56.69 85.84-161.66 29.15-234.46-40.28-51.71-107.08-75.09-170.82-59.79a171.08 171.08 0 0 0-21.88-31.29c2.46-.8 4.95-1.51 7.46-2.21 25.77-7.13 52.69-9.03 79.19-5.63h-.11zM0 129.16v-15.4C3.97 50.8 56.26.95 120.21.92h.05c66.58-.01 120.55 53.93 120.59 120.51.03 66.58-53.93 120.56-120.51 120.59C56.33 242.04 3.97 192.17 0 129.16zm106.56 31.56h27.62v24.45h-27.62v-24.45zm27.6-14.21h-27.6c-2.75-33.56-8.53-32.84-8.53-66.35 0-12.37 10.03-22.39 22.39-22.39 12.36 0 22.4 10.02 22.4 22.39 0 33.49-5.85 32.83-8.66 66.35zm163.46-42c1.24-9.88 10.24-16.88 20.09-15.64h.04c9.82 1.32 16.73 10.32 15.46 20.13l-11.7 94.09 65.06 50.55c7.85 6.1 9.3 17.4 3.2 25.28a18.011 18.011 0 0 1-11.95 6.82c-4.73.62-9.51-.68-13.26-3.62l-72.82-56.61a17.818 17.818 0 0 1-5.79-7.08 18.336 18.336 0 0 1-1.46-9.67l13.13-104.2v-.05z"/></svg>
\ No newline at end of file
diff --git a/apps/web/static/time-period-icon.svg b/apps/web/static/time-period-icon.svg
new file mode 100644
index 0000000..382e449
--- /dev/null
+++ b/apps/web/static/time-period-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 112.9"><title>time-period</title><path d="M35.69,101.21a24.08,24.08,0,0,0-4.23-11.35c-2.27-3.17-5.22-5.33-8.32-5.33s-6.06,2.16-8.33,5.33a24.08,24.08,0,0,0-4.23,11.35Zm78.39-73.63a4.17,4.17,0,0,0-7.37,3.81,4.68,4.68,0,0,0,.37.7,44,44,0,0,1,3.6,6.74,4.17,4.17,0,0,0,7.94-2.29,4.32,4.32,0,0,0-.3-1,52.05,52.05,0,0,0-4.24-7.93ZM107.14,16.5a4.63,4.63,0,0,1-3.23,5.18L91.54,25.46a4.63,4.63,0,1,1-2.69-8.86L90,16.24A47,47,0,0,0,22.46,44.49H13.84A55.33,55.33,0,0,1,94.7,9.33l-1.16-3A4.64,4.64,0,1,1,102.22,3l4.62,12.09a4.81,4.81,0,0,1,.3,1.42ZM67.6,104.55a53.52,53.52,0,0,0,9.43-.87,4.17,4.17,0,0,1,1,8.25,61.44,61.44,0,0,1-7.38.94c-1.31.06-3,0-4.34,0a55.19,55.19,0,0,1-10.91-1.33V103a46.85,46.85,0,0,0,12.15,1.59Zm23.25-6a4.17,4.17,0,1,0,4.09,7.26,55.27,55.27,0,0,0,7.46-5.06,4.17,4.17,0,0,0-3.89-7.21,4.07,4.07,0,0,0-1.34.73,47.39,47.39,0,0,1-6.32,4.28Zm16.42-15.64a4.16,4.16,0,1,0,7.06,4.41,55.51,55.51,0,0,0,4.15-8,4.17,4.17,0,0,0-7.15-4.14,4.11,4.11,0,0,0-.54.93,46,46,0,0,1-3.52,6.79Zm7.13-21.62a4.17,4.17,0,0,0,8.16,1.46,3.91,3.91,0,0,0,.15-.83,56.09,56.09,0,0,0,0-9,4.16,4.16,0,1,0-8.3.69,47.78,47.78,0,0,1,0,7.66ZM59.12,35a4.29,4.29,0,0,1,8.57,0V61.09l17.84,7.85a4.28,4.28,0,1,1-3.44,7.83L61.91,67.9a4.29,4.29,0,0,1-2.79-4V35ZM12.59,70.51h21.1a20.92,20.92,0,0,0,2-7H10.56a20.7,20.7,0,0,0,2,7ZM2.47,105.83a2.09,2.09,0,1,1,0-4.1H5.55a28.67,28.67,0,0,1,5.13-14.44,19.38,19.38,0,0,1,6.1-5.67,18.41,18.41,0,0,1-6.17-5.21,24.83,24.83,0,0,1-5.07-14H2.61a2.09,2.09,0,1,1,0-4.1H43.93a2.09,2.09,0,1,1,0,4.1h-3.2a24.83,24.83,0,0,1-5.07,14,18.41,18.41,0,0,1-6.17,5.21,19.38,19.38,0,0,1,6.1,5.67,28.67,28.67,0,0,1,5.13,14.44H43.8a2.09,2.09,0,1,1,0,4.1H2.47Z"/></svg>
\ No newline at end of file