diff --git a/app/components/Todo/TasksCounter.vue b/app/components/Todo/TasksCounter.vue
index 2467968..dd0cece 100644
--- a/app/components/Todo/TasksCounter.vue
+++ b/app/components/Todo/TasksCounter.vue
@@ -3,12 +3,16 @@
 </script>
 
 <template>
-	<div class="flex gap-0.5 border rounded border-secondary pl-0.5 text-xs">
-		<span class="text-nowrap"> {{ done }} / {{ from }} </span>
-		<div
-			class="border-l rounded border-secondary flex items-center justify-center aspect-square bg-secondary"
-		>
-			<Icon name="material-symbols:check-rounded" size="14" />
-		</div>
+	<div class="flex border rounded border-secondary pl-0.5 text-xs overflow-clip ">
+	<div class="grid grid-cols-2 gap-2 bg-[linear-gradient(110deg,transparent_50%,var(--color-secondary)_50%)]">
+    	<div class="text-center"> {{ done }} </div>
+    	<div class="text-center"> {{ from }} </div>
+	</div>
+	<div class="bg-secondary w-1" />
+	<div
+		class="flex items-center justify-center aspect-square bg-secondary"
+	>
+		<Icon name="material-symbols:check-rounded" size="14" />
+	</div>
 	</div>
 </template>