diff --git a/v2/pink-sb/src/lib/upload/Box.svelte b/v2/pink-sb/src/lib/upload/Box.svelte
index 7211dc582a..6b955e94fd 100644
--- a/v2/pink-sb/src/lib/upload/Box.svelte
+++ b/v2/pink-sb/src/lib/upload/Box.svelte
@@ -22,6 +22,7 @@
         size?: number;
         extension?: string;
         error?: string;
+        progress?: number;
         status?: 'failed' | 'pending' | 'success';
     })[] = [];
 
@@ -67,75 +68,100 @@
         <div transition:slide={{ axis: 'y', duration: 200 }}>
             {#each files as file}
                 {@const fileSize = file?.size ? humanFileSize(file.size) : false}
+                {@const hasProgress = typeof file?.progress === 'number' && file.progress > 0}
+                {@const clampedProgress = hasProgress
+                    ? Math.round(Math.min(Math.max(file.progress ?? 0, 0), 100))
+                    : 0}
+                {@const isError = !!file?.error || file?.status === 'failed'}
                 <section>
-                    <Stack
-                        direction="row"
-                        gap="s"
-                        justifyContent="space-between"
-                        alignItems="center"
-                    >
-                        <Stack direction="row" gap="s" style="overflow: hidden;">
-                            <Icon
-                                icon={IconDocument}
-                                color={file?.error
-                                    ? '--fgcolor-error'
-                                    : '--fgcolor-neutral-tertiary'}
-                            />
-                            <Stack direction="row" gap="xxs" inline style="min-width: 0;">
-                                <Text truncate>
-                                    {file.name}
-                                </Text>
-                                {#if fileSize}
-                                    <Text color="--fgcolor-neutral-tertiary">
-                                        <span style="white-space: nowrap">
-                                            ({fileSize.value}
-                                            {fileSize.unit})
-                                        </span>
+                    <Stack direction="column" gap="xs">
+                        <Stack
+                            direction="row"
+                            gap="s"
+                            justifyContent="space-between"
+                            alignItems="center"
+                        >
+                            <Stack direction="row" gap="s" style="overflow: hidden;">
+                                <Icon
+                                    icon={IconDocument}
+                                    color={file?.error
+                                        ? '--fgcolor-error'
+                                        : '--fgcolor-neutral-tertiary'}
+                                />
+                                <Stack direction="row" gap="xxs" inline style="min-width: 0;">
+                                    <Text truncate>
+                                        {file.name}
                                     </Text>
-                                {/if}
+                                    {#if fileSize}
+                                        <Text color="--fgcolor-neutral-tertiary">
+                                            <span style="white-space: nowrap">
+                                                ({fileSize.value}
+                                                {fileSize.unit})
+                                            </span>
+                                        </Text>
+                                    {/if}
+                                </Stack>
                             </Stack>
-                        </Stack>
-                        <Stack direction="row" gap="xxs" inline>
-                            {#if file?.status === 'success'}
-                                <Button variant="text" icon size="s">
+                            <Stack direction="row" gap="xxs" inline>
+                                {#if file?.status === 'success'}
                                     <Icon icon={IconCheck} color="--fgcolor-success" size="s" />
-                                </Button>
-                            {:else}
-                                {#if file?.error}
-                                    <Stack inline justifyContent="center">
-                                        <Badge
-                                            variant="secondary"
-                                            type="error"
-                                            content="Failed"
-                                            size="s"
-                                        />
-                                    </Stack>
-                                {:else if file?.status === 'pending'}
-                                    <Stack inline justifyContent="center">
-                                        <Badge
-                                            variant="secondary"
-                                            type="warning"
-                                            content="Pending"
+                                {:else}
+                                    {#if isError}
+                                        <Stack inline justifyContent="center">
+                                            <Badge
+                                                variant="secondary"
+                                                type="error"
+                                                content="Failed"
+                                                size="s"
+                                            />
+                                        </Stack>
+                                    {:else if hasProgress}
+                                        <Text color="--fgcolor-neutral-tertiary">
+                                            {clampedProgress}%
+                                        </Text>
+                                    {:else if file?.status === 'pending'}
+                                        <Stack inline justifyContent="center">
+                                            <Badge
+                                                variant="secondary"
+                                                type="warning"
+                                                content="Pending"
+                                                size="s"
+                                            />
+                                        </Stack>
+                                    {/if}
+                                    <Button
+                                        variant="text"
+                                        icon
+                                        size="s"
+                                        on:click={() => {
+                                            dispatch('remove', file);
+                                        }}
+                                    >
+                                        <Icon
+                                            icon={IconX}
+                                            color="--fgcolor-neutral-tertiary"
                                             size="s"
                                         />
-                                    </Stack>
+                                    </Button>
                                 {/if}
-                                <Button
-                                    variant="text"
-                                    icon
-                                    size="s"
-                                    on:click={() => {
-                                        dispatch('remove', file);
-                                    }}
-                                >
-                                    <Icon
-                                        icon={IconX}
-                                        color="--fgcolor-neutral-tertiary"
-                                        size="s"
-                                    />
-                                </Button>
-                            {/if}
+                            </Stack>
                         </Stack>
+                        {#if hasProgress && file?.status !== 'success'}
+                            <div
+                                class="upload-progress-bar"
+                                class:is-error={isError}
+                                role="progressbar"
+                                aria-valuenow={clampedProgress}
+                                aria-valuemin={0}
+                                aria-valuemax={100}
+                                aria-label="{file.name} upload progress"
+                            >
+                                <div
+                                    class="upload-progress-bar-fill"
+                                    style="width: {clampedProgress}%"
+                                />
+                            </div>
+                        {/if}
                     </Stack>
                 </section>
             {/each}
@@ -171,4 +197,23 @@
             flex-shrink: 1;
         }
     }
+
+    .upload-progress-bar {
+        height: 4px;
+        width: 100%;
+        border-radius: var(--border-radius-XS, 4px);
+        background: var(--bgcolor-neutral-secondary, hsl(0 0% 90%));
+        overflow: hidden;
+
+        &-fill {
+            height: 100%;
+            border-radius: inherit;
+            background: var(--bgcolor-accent);
+            transition: width 0.3s ease;
+        }
+
+        &.is-error &-fill {
+            background: var(--bgcolor-error, hsl(0 70% 55%));
+        }
+    }
 </style>
diff --git a/v2/pink-sb/src/stories/upload/Box.stories.svelte b/v2/pink-sb/src/stories/upload/Box.stories.svelte
index 86419fb66f..70288f5844 100644
--- a/v2/pink-sb/src/stories/upload/Box.stories.svelte
+++ b/v2/pink-sb/src/stories/upload/Box.stories.svelte
@@ -28,6 +28,38 @@
             status: 'pending'
         }
     ];
+
+    let filesWithProgress = [
+        {
+            name: 'uploading-file.png',
+            extension: 'png',
+            size: 15728640,
+            status: 'pending',
+            progress: 45
+        },
+        {
+            name: 'almost-done.pdf',
+            extension: 'pdf',
+            size: 8388608,
+            status: 'pending',
+            progress: 92
+        },
+        {
+            name: 'completed-file.jpg',
+            extension: 'jpg',
+            size: 41024,
+            status: 'success',
+            progress: 100
+        },
+        {
+            name: 'failed-upload.zip',
+            extension: 'zip',
+            size: 52428800,
+            status: 'failed',
+            error: 'File exceeds size limit',
+            progress: 60
+        }
+    ];
 </script>
 
 <script>
@@ -44,3 +76,10 @@
         files
     }}
 />
+
+<Story
+    name="With Progress"
+    args={{
+        files: filesWithProgress
+    }}
+/>