diff --git a/src/routes/dataset/model-check/ModelItem.svelte b/src/routes/dataset/model-check/ModelItem.svelte
new file mode 100644
index 0000000..f376cd1
--- /dev/null
+++ b/src/routes/dataset/model-check/ModelItem.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+import Check from '$lib/components/icons/Check.svelte';
+import Close from '$lib/components/icons/Close.svelte';
+import Warning from '$lib/components/icons/Warning.svelte';
+import type { Snippet } from 'svelte';
+
+type ModelItemProps = {
+  status: 'ok' | 'unexists' | 'downloading' | 'error';
+  progress?: number;
+  children?: Snippet;
+};
+
+let { status, progress, children }: ModelItemProps = $props();
+</script>
+
+<div class="flex flex-col justify-center gap-1">
+  <div
+    class={[
+      'radial-progress',
+      status === 'ok' && 'text-green-500',
+      status === 'unexists' && 'text-orange-500',
+      status === 'downloading' && 'text-blue-500',
+      status === 'error' && 'text-red-500',
+    ]}
+    style:--value={status === 'downloading' ? (progress ?? 0) : 100}
+    style:--size="4rem"
+    role="progressbar">
+    {#if status === 'downloading' && progress !== undefined}
+      {progress}%
+    {:else if status === 'ok'}
+      <Check width="30" />
+    {:else if status === 'unexists'}
+      <Warning width="30" />
+    {:else if status === 'error'}
+      <Close width="30" />
+    {/if}
+  </div>
+  <span class="text-center">{@render children?.()}</span>
+</div>