diff --git a/components/Progress.vue b/components/Progress.vue
new file mode 100644
index 0000000..4045c9c
--- /dev/null
+++ b/components/Progress.vue
@@ -0,0 +1,13 @@
+<template>
+    <ProgressRoot :max="max" v-model="model" class="my-2 relative overflow-hidden bg-light-25 dark:bg-dark-25 w-48 h-3 data-[shape=thin]:h-1 data-[shape=large]:h-6" :data-shape="shape" style="transform: translateZ(0)" >
+        <ProgressIndicator class="bg-light-50 dark:bg-dark-50 h-full transition-[width] duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]" :style="`width: ${((model ?? 0) / max) * 100}%`" />
+    </ProgressRoot>
+</template>
+
+<script setup lang="ts">
+const { max = 100, shape = 'normal' } = defineProps<{
+    max?: number
+    shape?: 'thin' | 'normal' | 'large'
+}>();
+const model = defineModel<number>();
+</script>
\ No newline at end of file
diff --git a/components/TimerProgress.vue b/components/TimerProgress.vue
new file mode 100644
index 0000000..fb98d79
--- /dev/null
+++ b/components/TimerProgress.vue
@@ -0,0 +1,21 @@
+<template>
+    <ProgressRoot class="my-2 relative overflow-hidden bg-light-25 dark:bg-dark-25 w-48 h-3 data-[shape=thin]:h-1 data-[shape=large]:h-6" :data-shape="shape" style="transform: translateZ(0)" >
+        <ProgressIndicator class="bg-light-50 dark:bg-dark-50 h-full w-0 transition-[width] ease-linear" :style="`transition-duration: ${delay}ms; width: ${progress ? 100 : 0}%`" />
+    </ProgressRoot>
+</template>
+
+<script setup lang="ts">
+const { delay = 1500, decreasing = false, shape = 'normal' } = defineProps<{
+    delay?: number
+    decreasing?: boolean
+    shape?: 'thin' | 'normal' | 'large'
+}>();
+
+const emit = defineEmits(['finish']);
+
+const progress = ref(false);
+nextTick(() => {
+    progress.value = true;
+    setTimeout(emit, delay, 'finish');
+});
+</script>
\ No newline at end of file
diff --git a/components/todo/Progress.vue b/components/todo/Progress.vue
deleted file mode 100644
index e69de29..0000000