diff --git a/src/components/FileUpload/FileMultiUpload.tsx b/src/components/FileUpload/FileMultiUpload.tsx
index b20b722d..93891c8a 100644
--- a/src/components/FileUpload/FileMultiUpload.tsx
+++ b/src/components/FileUpload/FileMultiUpload.tsx
@@ -61,9 +61,17 @@ const FileUploadTitle = styled(Title)<{ $isNotSupported: boolean }>`
       : theme.click.fileUpload.color.title.default};
 `;
 
-const FileUploadDescription = styled(Text)`
+const FileName = styled(Text)`
   font: ${({ theme }) => theme.click.fileUpload.typography.description.default};
-  color: ${({ theme }) => theme.click.fileUpload.color.description.default};
+  color: ${({ theme }) => theme.click.fileUpload.color.title.default};
+`;
+
+const FileUploadDescription = styled(Text)<{ $isError?: boolean }>`
+  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};
+  color: ${({ theme, $isError }) =>
+    $isError
+      ? theme.click.fileUpload.color.title.error
+      : theme.click.fileUpload.color.description.default};
 `;
 
 const UploadIcon = styled(Icon)`
@@ -106,7 +114,7 @@ const FileItem = styled.div<{ $isError?: boolean }>`
     props.$isError &&
     css`
       background-color: ${({ theme }) => theme.click.fileUpload.color.background.error};
-      border: none;
+      border-color: transparent;
     `}
 `;
 
@@ -118,20 +126,6 @@ const DocumentIcon = styled(Icon)`
   }
 `;
 
-const FileInfoHeader = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap};
-  width: 100%;
-`;
-
-const FileInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.click.fileUpload.hasFile.header.space.gap};
-  flex: 1;
-`;
-
 const FileDetails = styled.div`
   display: flex;
   gap: ${({ theme }) => theme.click.fileUpload.md.space.gap};
@@ -145,23 +139,17 @@ const FileActions = styled.div`
   gap: 0;
 `;
 
-const ProgressContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-const ProgressBarContainer = styled.div`
-  width: 100%;
+const FileContentContainer = styled.div`
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 24px;
 `;
 
-const ProgressPercentage = styled(Text)`
-  min-width: ${({ theme }) => theme.sizes[10]};
-  text-align: right;
-  padding-right: ${({ theme }) => theme.click.fileUpload.md.space.gap};
+const ProgressBarWrapper = styled.div`
+  margin-top: ${({ theme }) => theme.click.fileUpload.md.space.gap};
+  margin-bottom: 9px;
 `;
 
 const formatFileSize = (sizeInBytes: number): string => {
@@ -376,71 +364,56 @@ export const FileMultiUpload = ({
               key={file.id}
               $isError={file.status === "error"}
             >
-              <FileInfo>
-                <FileInfoHeader>
-                  <DocumentIcon name={"document"} />
-                  <FileDetails>
-                    <Text size={"md"}>{truncateFilename(file.name)}</Text>
-                    {(file.status === "success" || file.status === "uploading") && (
-                      <Text
-                        size={"md"}
-                        color={"muted"}
-                      >
-                        {formatFileSize(file.size)}
-                      </Text>
-                    )}
-                    {file.status === "error" && (
-                      <Text
-                        size={"md"}
-                        color={"danger"}
-                      >
-                        {file.errorMessage || "Upload failed"}
-                      </Text>
-                    )}
-                    {file.status === "success" && (
-                      <Icon
-                        size={"xs"}
-                        state={"success"}
-                        name={"check"}
-                      />
-                    )}
-                  </FileDetails>
-
-                  <FileActions>
-                    {file.status === "error" && (
-                      <IconButton
-                        size={"sm"}
-                        icon={"refresh"}
-                        type={"ghost"}
-                        onClick={() => handleRetryUpload(file.id)}
-                      />
-                    )}
-                    <IconButton
-                      size={"sm"}
-                      icon={"cross"}
-                      type={"ghost"}
-                      onClick={() => handleRemoveFile(file.id)}
+              <DocumentIcon name={"document"} />
+              <FileContentContainer>
+                <FileDetails>
+                  <FileName>{truncateFilename(file.name)}</FileName>
+                  {file.status === "uploading" && (
+                    <FileUploadDescription>{file.progress}%</FileUploadDescription>
+                  )}
+                  {file.status === "error" && (
+                    <FileUploadDescription $isError>
+                      {file.errorMessage || "Upload failed"}
+                    </FileUploadDescription>
+                  )}
+                  {file.status === "success" && (
+                    <Icon
+                      size={"xs"}
+                      state={"success"}
+                      name={"check"}
                     />
-                  </FileActions>
-                </FileInfoHeader>
-
+                  )}
+                </FileDetails>
                 {file.status === "uploading" && (
-                  <ProgressContainer>
-                    <ProgressBarContainer>
-                      <ProgressBar
-                        progress={file.progress}
-                        type={"small"}
-                      />
-                    </ProgressBarContainer>
-                    <ProgressPercentage
-                      size={"sm"}
-                      color={"muted"}
-                    >
-                      {file.progress}%
-                    </ProgressPercentage>
-                  </ProgressContainer>
+                  <ProgressBarWrapper>
+                    <ProgressBar
+                      progress={file.progress}
+                      type={"small"}
+                    />
+                  </ProgressBarWrapper>
+                )}
+                {(file.status === "success" || file.status === "error") && (
+                  <FileUploadDescription>
+                    {formatFileSize(file.size)}
+                  </FileUploadDescription>
+                )}
+              </FileContentContainer>
+              <FileActions>
+                {file.status === "error" && (
+                  <IconButton
+                    size={"sm"}
+                    icon={"refresh"}
+                    type={"ghost"}
+                    onClick={() => handleRetryUpload(file.id)}
+                  />
                 )}
-              </FileInfo>
+                <IconButton
+                  size={"sm"}
+                  icon={"cross"}
+                  type={"ghost"}
+                  onClick={() => handleRemoveFile(file.id)}
+                />
+              </FileActions>
             </FileItem>
           ))}
         </FilesList>
diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
index 4d2f1fbf..819de8e3 100644
--- a/src/components/FileUpload/FileUpload.tsx
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -43,6 +43,10 @@ const UploadArea = styled.div<{
     $hasFile || $size === "sm"
       ? `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`
       : `${theme.click.fileUpload.md.space.y} ${theme.click.fileUpload.md.space.x}`};
+  min-height: ${({ theme, $size }) =>
+    $size === "sm"
+      ? `calc(${theme.click.fileUpload.sm.space.y} * 2 + ${theme.sizes[6]})`
+      : "auto"};
   display: flex;
   flex-direction: ${props =>
     props.$hasFile ? "row" : props.$size === "sm" ? "row" : "column"};
@@ -74,7 +78,7 @@ const UploadArea = styled.div<{
     props.$isError &&
     css`
       background-color: ${({ theme }) => theme.click.fileUpload.color.background.error};
-      border: none;
+      border-color: transparent;
     `}
 `;
 
@@ -86,16 +90,24 @@ const FileUploadTitle = styled(Title)<{ $isNotSupported: boolean }>`
       : theme.click.fileUpload.color.title.default};
 `;
 
-const FileUploadDescription = styled(Text)`
+const FileName = styled(Text)`
   font: ${({ theme }) => theme.click.fileUpload.typography.description.default};
-  color: ${({ theme }) => theme.click.fileUpload.color.description.default};
+  color: ${({ theme }) => theme.click.fileUpload.color.title.default};
+`;
+
+const FileUploadDescription = styled(Text)<{ $isError?: boolean }>`
+  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};
+  color: ${({ theme, $isError }) =>
+    $isError
+      ? theme.click.fileUpload.color.title.error
+      : theme.click.fileUpload.color.description.default};
 `;
 
 const DocumentIcon = styled(Icon)`
   svg {
-    width: ${({ theme }) => theme.click.fileUpload.sm.icon.size.width};
-    height: ${({ theme }) => theme.click.fileUpload.sm.icon.size.height};
-    color: ${({ theme }) => theme.click.fileUpload.sm.color.icon.default};
+    width: ${({ theme }) => theme.click.fileUpload.md.icon.size.width};
+    height: ${({ theme }) => theme.click.fileUpload.md.icon.size.height};
+    color: ${({ theme }) => theme.click.fileUpload.md.color.icon.default};
   }
 `;
 
@@ -126,18 +138,10 @@ const UploadText = styled.div<{ $size: "sm" | "md"; $hasFile: boolean }>`
     `}
 `;
 
-const FileInfoHeader = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap};
-  width: 100%;
-`;
-
 const FileInfo = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: ${({ theme }) => theme.click.fileUpload.hasFile.header.space.gap};
-  flex: 1;
 `;
 
 const FileDetails = styled.div`
@@ -153,23 +157,17 @@ const FileActions = styled.div`
   gap: 0;
 `;
 
-const ProgressContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-const ProgressBarContainer = styled.div`
-  width: 100%;
+const FileContentContainer = styled.div<{ $size: "sm" | "md" }>`
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: ${({ $size }) => ($size === "sm" ? "24px" : "auto")};
 `;
 
-const ProgressPercentage = styled(Text)`
-  min-width: ${({ theme }) => theme.sizes[10]};
-  text-align: right;
-  padding-right: ${({ theme }) => theme.click.fileUpload.md.space.gap};
+const ProgressBarWrapper = styled.div`
+  margin-top: ${({ theme }) => theme.click.fileUpload.md.space.gap};
+  margin-bottom: 9px;
 `;
 
 const formatFileSize = (sizeInBytes: number): string => {
@@ -393,26 +391,16 @@ export const FileUpload = ({
             </Button>
           </>
         ) : (
-          <FileInfo>
-            <FileInfoHeader>
-              <DocumentIcon name={"document"} />
+          <>
+            <DocumentIcon name={"document"} />
+            <FileContentContainer $size={size}>
               <FileDetails>
-                <Text size={"md"}>{truncateFilename(file.name)}</Text>
-                {(showSuccess || showProgress) && (
-                  <Text
-                    size={"md"}
-                    color={"muted"}
-                  >
-                    {formatFileSize(file.size)}
-                  </Text>
+                <FileName>{truncateFilename(file.name)}</FileName>
+                {showProgress && !showSuccess && (
+                  <FileUploadDescription>{progress}%</FileUploadDescription>
                 )}
                 {!showProgress && !showSuccess && (
-                  <Text
-                    size={"md"}
-                    color={"danger"}
-                  >
-                    {failureMessage}
-                  </Text>
+                  <FileUploadDescription $isError>{failureMessage}</FileUploadDescription>
                 )}
                 {showSuccess && (
                   <Icon
@@ -422,42 +410,35 @@ export const FileUpload = ({
                   />
                 )}
               </FileDetails>
-
-              <FileActions>
-                {!showProgress && !showSuccess && (
-                  <IconButton
-                    size={"sm"}
-                    icon={"refresh"}
-                    type={"ghost"}
-                    onClick={handleRetryUpload}
-                  />
-                )}
-                <IconButton
-                  size={"sm"}
-                  icon={"cross"}
-                  type={"ghost"}
-                  onClick={handleRemoveFile}
-                />
-              </FileActions>
-            </FileInfoHeader>
-
-            {showProgress && (
-              <ProgressContainer>
-                <ProgressBarContainer>
+              {showProgress && !showSuccess && (
+                <ProgressBarWrapper>
                   <ProgressBar
                     progress={progress}
                     type={"small"}
                   />
-                </ProgressBarContainer>
-                <ProgressPercentage
+                </ProgressBarWrapper>
+              )}
+              {(showSuccess || !showProgress) && (
+                <FileUploadDescription>{formatFileSize(file.size)}</FileUploadDescription>
+              )}
+            </FileContentContainer>
+            <FileActions>
+              {!showProgress && !showSuccess && (
+                <IconButton
                   size={"sm"}
-                  color={"muted"}
-                >
-                  {progress}%
-                </ProgressPercentage>
-              </ProgressContainer>
-            )}
-          </FileInfo>
+                  icon={"refresh"}
+                  type={"ghost"}
+                  onClick={handleRetryUpload}
+                />
+              )}
+              <IconButton
+                size={"sm"}
+                icon={"cross"}
+                type={"ghost"}
+                onClick={handleRemoveFile}
+              />
+            </FileActions>
+          </>
         )}
       </UploadArea>