diff --git a/.changeset/mighty-rice-smell.md b/.changeset/mighty-rice-smell.md
new file mode 100644
index 00000000000..8130ff2e0c8
--- /dev/null
+++ b/.changeset/mighty-rice-smell.md
@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': patch
+---
+
+fixed missing styles for FileUploader component
diff --git a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
index f9c5e341e08..f96d36e9ddc 100644
--- a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
+++ b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
@@ -3310,6 +3310,250 @@ exports[`CSS Variables Table 1`] = `
         "variable": "--amplify-components-fieldset-small-gap",
         "value": "var(--amplify-components-field-small-gap)"
     },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-background-color",
+        "value": "var(--amplify-colors-primary-10)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-color",
+        "value": "var(--amplify-colors-border-pressed)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-radius",
+        "value": "var(--amplify-components-fileuploader-dropzone-border-radius)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-style",
+        "value": "var(--amplify-components-fileuploader-dropzone-border-style)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-width",
+        "value": "var(--amplify-border-widths-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-background-color",
+        "value": "var(--amplify-colors-background-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-style",
+        "value": "dashed"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-width",
+        "value": "var(--amplify-border-widths-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-icon-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-icon-font-size",
+        "value": "var(--amplify-font-sizes-xxl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-padding-block",
+        "value": "var(--amplify-space-xl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-padding-inline",
+        "value": "var(--amplify-space-large)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-align",
+        "value": "center"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-font-size",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-font-weight",
+        "value": "var(--amplify-font-weights-bold)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-align-items",
+        "value": "baseline"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-background-color",
+        "value": "var(--amplify-colors-background-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-style",
+        "value": "solid"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-width",
+        "value": "var(--amplify-border-widths-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-background-color",
+        "value": "var(--amplify-colors-background-secondary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-height",
+        "value": "var(--amplify-space-xxl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-width",
+        "value": "var(--amplify-space-xxl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-name-color",
+        "value": "var(--amplify-colors-font-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-name-font-size",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-name-font-weight",
+        "value": "var(--amplify-font-weights-bold)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-padding-block",
+        "value": "var(--amplify-space-xs)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-padding-inline",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-size-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-size-font-size",
+        "value": "var(--amplify-font-sizes-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-size-font-weight",
+        "value": "var(--amplify-font-weights-normal)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-filelist-flex-direction",
+        "value": "column"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-filelist-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-empty",
+        "value": "var(--amplify-colors-border-secondary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-filled",
+        "value": "var(--amplify-components-loader-stroke-filled)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-linecap",
+        "value": "round"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-width",
+        "value": "var(--amplify-border-widths-large)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-background-color",
+        "value": "var(--amplify-colors-background-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-body-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-body-padding-block",
+        "value": "var(--amplify-space-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-body-padding-inline",
+        "value": "var(--amplify-space-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-style",
+        "value": "solid"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-width",
+        "value": "var(--amplify-border-widths-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-footer-justify-content",
+        "value": "flex-end"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-max-height",
+        "value": "40rem"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-max-width",
+        "value": "auto"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-padding-block",
+        "value": "var(--amplify-space-zero)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-padding-inline",
+        "value": "var(--amplify-space-zero)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-text-color",
+        "value": "var(--amplify-colors-font-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-text-font-size",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-text-font-weight",
+        "value": "var(--amplify-font-weights-bold)"
+    },
     {
         "variable": "--amplify-components-flex-align-content",
         "value": "normal"
diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx
index bf39b3c55fd..ee9ad1f4a05 100644
--- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx
+++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx
@@ -8,7 +8,7 @@ const theme = {
       small: '2px',
     },
     components: {
-      storagemanager: {
+      fileuploader: {
         dropzone: {
           borderColor: '{colors.primary.60}',
         },
diff --git a/packages/ui/src/theme/__tests__/__snapshots__/defaultTheme.test.ts.snap b/packages/ui/src/theme/__tests__/__snapshots__/defaultTheme.test.ts.snap
index 8c5d3fcdb87..27b7132a0cd 100644
--- a/packages/ui/src/theme/__tests__/__snapshots__/defaultTheme.test.ts.snap
+++ b/packages/ui/src/theme/__tests__/__snapshots__/defaultTheme.test.ts.snap
@@ -701,6 +701,67 @@ exports[`@aws-amplify/ui defaultTheme should match snapshot 1`] = `
 --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
 --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
 --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
+--amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-border-style: dashed;
+--amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
+--amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
+--amplify-components-fileuploader-dropzone-text-align: center;
+--amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
+--amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+--amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+--amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
+--amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+--amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-file-border-style: solid;
+--amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
+--amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
+--amplify-components-fileuploader-file-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-file-align-items: baseline;
+--amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
+--amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
+--amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
+--amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-filelist-flex-direction: column;
+--amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-loader-stroke-linecap: round;
+--amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
+--amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+--amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
+--amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-previewer-border-style: solid;
+--amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-max-height: 40rem;
+--amplify-components-fileuploader-previewer-max-width: auto;
+--amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
 --amplify-components-flex-gap: var(--amplify-space-medium);
 --amplify-components-flex-justify-content: normal;
 --amplify-components-flex-align-items: stretch;
diff --git a/packages/ui/src/theme/__tests__/__snapshots__/overrides.test.ts.snap b/packages/ui/src/theme/__tests__/__snapshots__/overrides.test.ts.snap
index b84ad5ac568..a4b700e4656 100644
--- a/packages/ui/src/theme/__tests__/__snapshots__/overrides.test.ts.snap
+++ b/packages/ui/src/theme/__tests__/__snapshots__/overrides.test.ts.snap
@@ -701,6 +701,67 @@ exports[`@aws-amplify/ui overrides should match snapshot 1`] = `
 --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
 --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
 --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
+--amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-border-style: dashed;
+--amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
+--amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
+--amplify-components-fileuploader-dropzone-text-align: center;
+--amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
+--amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+--amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+--amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
+--amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+--amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-file-border-style: solid;
+--amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
+--amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
+--amplify-components-fileuploader-file-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-file-align-items: baseline;
+--amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
+--amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
+--amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
+--amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-filelist-flex-direction: column;
+--amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-loader-stroke-linecap: round;
+--amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
+--amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+--amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
+--amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-previewer-border-style: solid;
+--amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-max-height: 40rem;
+--amplify-components-fileuploader-previewer-max-width: auto;
+--amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
 --amplify-components-flex-gap: var(--amplify-space-medium);
 --amplify-components-flex-justify-content: normal;
 --amplify-components-flex-align-items: stretch;
diff --git a/packages/ui/src/theme/components/index.ts b/packages/ui/src/theme/components/index.ts
index 0914226dd2c..eb8c5c69d2d 100644
--- a/packages/ui/src/theme/components/index.ts
+++ b/packages/ui/src/theme/components/index.ts
@@ -16,6 +16,7 @@ import { DropZoneTheme } from './dropZone';
 import { FieldTheme } from './field';
 import { FieldGroupTheme } from './fieldGroup';
 import { FieldsetTheme } from './fieldset';
+import { FileUploaderTheme } from './fileUploader';
 import { HeadingTheme } from './heading';
 import { HighlightMatchTheme } from './highlightMatch';
 import { InputTheme } from './input';
@@ -66,6 +67,7 @@ export type ComponentsTheme<TokensType extends WebTokens = WebTokens> =
   | BaseComponentTheme<FieldTheme, 'field', TokensType>
   | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType>
   | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType>
+  | BaseComponentTheme<FileUploaderTheme, 'fileuploader', TokensType>
   | BaseComponentTheme<HeadingTheme, 'heading', TokensType>
   | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType>
   | BaseComponentTheme<InputTheme, 'input', TokensType>
@@ -114,6 +116,7 @@ export type AllComponentThemes = {
   field: FieldTheme;
   'field-group': FieldGroupTheme;
   fieldset: FieldsetTheme;
+  fileuploader: FileUploaderTheme;
   heading: HeadingTheme;
   highlightmatch: HighlightMatchTheme;
   input: InputTheme;
diff --git a/packages/ui/src/theme/css/component/FileUploader/fileUploader.scss b/packages/ui/src/theme/css/component/FileUploader/fileUploader.scss
new file mode 100644
index 00000000000..1566317fcab
--- /dev/null
+++ b/packages/ui/src/theme/css/component/FileUploader/fileUploader.scss
@@ -0,0 +1,223 @@
+.amplify-fileuploader {
+  &__dropzone {
+    background-color: var(
+      --amplify-components-fileuploader-dropzone-background-color
+    );
+    border-color: var(
+      --amplify-components-fileuploader-dropzone-border-color
+    );
+    border-radius: var(
+      --amplify-components-fileuploader-dropzone-border-radius
+    );
+    border-style: var(
+      --amplify-components-fileuploader-dropzone-border-style
+    );
+    border-width: var(
+      --amplify-components-fileuploader-dropzone-border-width
+    );
+    text-align: var(--amplify-components-fileuploader-dropzone-text-align);
+    padding-block: var(
+      --amplify-components-fileuploader-dropzone-padding-block
+    );
+    padding-inline: var(
+      --amplify-components-fileuploader-dropzone-padding-inline
+    );
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--amplify-components-fileuploader-dropzone-gap);
+
+    &--small {
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    &--active {
+      border-color: var(
+        --amplify-components-fileuploader-dropzone-active-border-color
+      );
+      border-width: var(
+        --amplify-components-fileuploader-dropzone-active-border-width
+      );
+      background-color: var(
+        --amplify-components-fileuploader-dropzone-active-background-color
+      );
+    }
+
+    &__icon {
+      font-size: var(
+        --amplify-components-fileuploader-dropzone-icon-font-size
+      );
+      color: var(--amplify-components-fileuploader-dropzone-icon-color);
+    }
+
+    &__text {
+      color: var(--amplify-components-fileuploader-dropzone-text-color);
+      font-size: var(
+        --amplify-components-fileuploader-dropzone-text-font-size
+      );
+      font-weight: var(
+        --amplify-components-fileuploader-dropzone-text-font-weight
+      );
+    }
+  }
+
+  &__file__list {
+    display: flex;
+    flex-direction: var(
+      --amplify-components-fileuploader-filelist-flex-direction
+    );
+    gap: var(--amplify-components-fileuploader-filelist-gap);
+  }
+
+  &__file {
+    position: relative;
+    border-width: var(--amplify-components-fileuploader-file-border-width);
+    border-style: var(--amplify-components-fileuploader-file-border-style);
+    border-color: var(--amplify-components-fileuploader-file-border-color);
+    border-radius: var(--amplify-components-fileuploader-file-border-radius);
+    display: flex;
+    flex-direction: column;
+    padding-inline: var(
+      --amplify-components-fileuploader-file-padding-inline
+    );
+    padding-block: var(--amplify-components-fileuploader-file-padding-block);
+    align-items: var(--amplify-components-fileuploader-file-align-items);
+
+    &__wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--amplify-components-fileuploader-file-gap);
+    }
+    &__name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-weight: var(
+        --amplify-components-fileuploader-file-name-font-weight
+      );
+      font-size: var(--amplify-components-fileuploader-file-name-font-size);
+      color: var(--amplify-components-fileuploader-file-name-color);
+    }
+
+    &__size {
+      font-weight: var(
+        --amplify-components-fileuploader-file-size-font-weight
+      );
+      font-size: var(--amplify-components-fileuploader-file-size-font-size);
+      color: var(--amplify-components-fileuploader-file-size-color);
+    }
+
+    &__main {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    &__image {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--amplify-components-fileuploader-file-image-width);
+      height: var(--amplify-components-fileuploader-file-image-height);
+      background-color: var(
+        --amplify-components-fileuploader-file-image-background-color
+      );
+      border-radius: var(
+        --amplify-components-fileuploader-file-image-border-radius
+      );
+      color: var(--amplify-components-fileuploader-file-image-color);
+      img {
+        max-height: 100%;
+      }
+    }
+
+    &__status {
+      &--error {
+        color: var(--amplify-colors-font-error);
+        font-size: var(--amplify-components-fileuploader-file-size-font-size);
+      }
+      &--success {
+        color: var(--amplify-colors-font-success);
+      }
+    }
+  }
+
+  &__loader {
+    stroke-linecap: var(
+      --amplify-components-fileuploader-loader-stroke-linecap
+    );
+    stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
+    stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
+    height: var(--amplify-components-fileuploader-loader-stroke-width);
+
+    --amplify-components-loader-linear-stroke-filled: var(
+      --amplify-components-fileuploader-loader-stroke-filled
+    );
+
+    overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  // Previewer
+  &__previewer {
+    display: flex;
+    flex-direction: column;
+    max-width: var(--amplify-components-fileuploader-previewer-max-width);
+    max-height: var(--amplify-components-fileuploader-previewer-max-height);
+
+    overflow: auto;
+    gap: var(--amplify-components-fileuploader-previewer-body-gap);
+    padding-inline: var(
+      --amplify-components-fileuploader-previewer-body-padding-inline
+    );
+    padding-block: var(
+      --amplify-components-fileuploader-previewer-body-padding-block
+    );
+
+    background-color: var(
+      --amplify-components-fileuploader-previewer-background-color
+    );
+    border-width: var(
+      --amplify-components-fileuploader-previewer-border-width
+    );
+    border-style: var(
+      --amplify-components-fileuploader-previewer-border-style
+    );
+    border-color: var(
+      --amplify-components-fileuploader-previewer-border-color
+    );
+    border-radius: var(
+      --amplify-components-fileuploader-previewer-border-radius
+    );
+
+    &__text {
+      font-weight: var(
+        --amplify-components-fileuploader-previewer-text-font-weight
+      );
+      font-size: var(
+        --amplify-components-fileuploader-previewer-text-font-size
+      );
+      color: var(--amplify-components-fileuploader-previewer-text-color);
+    }
+
+    &__footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: var(
+        --amplify-components-fileuploader-previewer-footer-justify-content
+      );
+    }
+
+    &__actions {
+      display: flex;
+      flex-direction: row;
+      gap: var(--amplify-space-small);
+    }
+  }
+}
diff --git a/packages/ui/src/theme/css/component/FileUploader/index.scss b/packages/ui/src/theme/css/component/FileUploader/index.scss
new file mode 100644
index 00000000000..00b81c7f72c
--- /dev/null
+++ b/packages/ui/src/theme/css/component/FileUploader/index.scss
@@ -0,0 +1 @@
+@import './fileUploader.scss';
diff --git a/packages/ui/src/theme/css/styles.scss b/packages/ui/src/theme/css/styles.scss
index 04c61562b91..9236495e77e 100644
--- a/packages/ui/src/theme/css/styles.scss
+++ b/packages/ui/src/theme/css/styles.scss
@@ -62,6 +62,8 @@
 @import './component/textField.scss';
 @import './component/toggleButton.scss';
 @import './component/toggleButtonGroup.scss';
+// FileUploader component
+@import './component/FileUploader/index.scss';
 // In-App Messaging components
 @import './component/inAppMessaging/index.scss';
 // StorageManager component
diff --git a/packages/ui/src/theme/tokens/components/fileuploader.ts b/packages/ui/src/theme/tokens/components/fileuploader.ts
new file mode 100644
index 00000000000..0c1dec35b7d
--- /dev/null
+++ b/packages/ui/src/theme/tokens/components/fileuploader.ts
@@ -0,0 +1,174 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+import { TypographyTokens } from '../types/typography';
+
+type BaseDropZoneTokens<OutputType> = DesignTokenProperties<
+  | 'backgroundColor'
+  | 'borderWidth'
+  | 'borderStyle'
+  | 'borderColor'
+  | 'borderRadius',
+  OutputType
+>;
+export interface FileUploaderTokens<OutputType extends OutputVariantKey> {
+  dropzone?: DesignTokenProperties<
+    'gap' | 'paddingBlock' | 'paddingInline' | 'textAlign',
+    OutputType
+  > &
+    BaseDropZoneTokens<OutputType> & {
+      _active?: BaseDropZoneTokens<OutputType>;
+
+      icon?: DesignTokenProperties<'fontSize' | 'color', OutputType>;
+
+      text?: TypographyTokens<OutputType>;
+    };
+  file?: DesignTokenProperties<
+    | 'alignItems'
+    | 'backgroundColor'
+    | 'borderColor'
+    | 'borderRadius'
+    | 'borderStyle'
+    | 'borderWidth'
+    | 'gap'
+    | 'paddingBlock'
+    | 'paddingInline',
+    OutputType
+  > & {
+    name?: TypographyTokens<OutputType>;
+    size?: TypographyTokens<OutputType>;
+    image?: DesignTokenProperties<
+      'backgroundColor' | 'borderRadius' | 'color' | 'height' | 'width',
+      OutputType
+    >;
+  };
+  filelist?: DesignTokenProperties<'flexDirection' | 'gap'>;
+  loader?: DesignTokenProperties<
+    'strokeWidth' | 'strokeFilled' | 'strokeEmpty' | 'strokeLinecap',
+    OutputType
+  >;
+
+  previewer?: DesignTokenProperties<
+    | 'backgroundColor'
+    | 'borderColor'
+    | 'borderRadius'
+    | 'borderStyle'
+    | 'borderWidth'
+    | 'maxHeight'
+    | 'maxWidth'
+    | 'paddingBlock'
+    | 'paddingInline',
+    OutputType
+  > & {
+    text?: TypographyTokens<OutputType>;
+
+    body?: DesignTokenProperties<
+      'gap' | 'paddingInline' | 'paddingBlock',
+      OutputType
+    >;
+    footer?: DesignTokenProperties<'justifyContent', OutputType>;
+  };
+}
+
+export const fileuploader: Required<FileUploaderTokens<'default'>> = {
+  dropzone: {
+    backgroundColor: { value: '{colors.background.primary}' },
+    borderRadius: { value: '{radii.small}' },
+    borderColor: { value: '{colors.border.primary}' },
+    borderStyle: { value: 'dashed' },
+    borderWidth: { value: '{borderWidths.small}' },
+    gap: { value: '{space.small}' },
+    paddingBlock: { value: '{space.xl}' },
+    paddingInline: { value: '{space.large}' },
+    textAlign: { value: 'center' },
+
+    _active: {
+      backgroundColor: { value: '{colors.primary.10}' },
+      borderRadius: {
+        value: '{components.fileuploader.dropzone.borderRadius}',
+      },
+      borderColor: { value: '{colors.border.pressed}' },
+      borderStyle: {
+        value: '{components.fileuploader.dropzone.borderStyle}',
+      },
+      borderWidth: { value: '{borderWidths.medium}' },
+    },
+
+    icon: {
+      color: { value: '{colors.border.primary}' },
+      fontSize: { value: '{fontSizes.xxl}' },
+    },
+
+    text: {
+      color: { value: '{colors.font.tertiary}' },
+      fontSize: { value: '{fontSizes.medium}' },
+      fontWeight: { value: '{fontWeights.bold}' },
+    },
+  },
+
+  file: {
+    backgroundColor: { value: '{colors.background.primary}' },
+    borderRadius: { value: '{radii.small}' },
+    borderColor: { value: '{colors.border.primary}' },
+    borderStyle: { value: 'solid' },
+    borderWidth: { value: '{borderWidths.small}' },
+    paddingBlock: { value: '{space.xs}' },
+    paddingInline: { value: '{space.small}' },
+    gap: { value: '{space.small}' },
+    alignItems: { value: 'baseline' },
+
+    name: {
+      fontSize: { value: '{fontSizes.medium}' },
+      fontWeight: { value: '{fontWeights.bold}' },
+      color: { value: '{colors.font.primary}' },
+    },
+
+    size: {
+      fontSize: { value: '{fontSizes.small}' },
+      fontWeight: { value: '{fontWeights.normal}' },
+      color: { value: '{colors.font.tertiary}' },
+    },
+
+    image: {
+      width: { value: '{space.xxl}' },
+      height: { value: '{space.xxl}' },
+      backgroundColor: { value: '{colors.background.secondary}' },
+      color: { value: '{colors.font.tertiary}' },
+      borderRadius: { value: '{radii.small}' },
+    },
+  },
+  filelist: {
+    flexDirection: { value: 'column' },
+    gap: { value: '{space.small}' },
+  },
+  loader: {
+    strokeLinecap: { value: 'round' },
+    strokeEmpty: { value: '{colors.border.secondary}' },
+    strokeFilled: { value: '{components.loader.strokeFilled}' },
+    strokeWidth: { value: '{borderWidths.large}' },
+  },
+  previewer: {
+    backgroundColor: { value: '{colors.background.primary}' },
+    borderColor: { value: '{colors.border.primary}' },
+    borderStyle: { value: 'solid' },
+    borderWidth: { value: '{borderWidths.small}' },
+    borderRadius: { value: '{radii.small}' },
+    paddingBlock: { value: '{space.zero}' },
+    paddingInline: { value: '{space.zero}' },
+    maxHeight: { value: '40rem' },
+    maxWidth: { value: 'auto' },
+
+    text: {
+      fontSize: { value: '{fontSizes.medium}' },
+      fontWeight: { value: '{fontWeights.bold}' },
+      color: { value: '{colors.font.primary}' },
+    },
+
+    body: {
+      paddingBlock: { value: '{space.medium}' },
+      paddingInline: { value: '{space.medium}' },
+      gap: { value: '{space.small}' },
+    },
+    footer: {
+      justifyContent: { value: 'flex-end' },
+    },
+  },
+};
diff --git a/packages/ui/src/theme/tokens/components/index.ts b/packages/ui/src/theme/tokens/components/index.ts
index 831b818af79..650cda3042d 100644
--- a/packages/ui/src/theme/tokens/components/index.ts
+++ b/packages/ui/src/theme/tokens/components/index.ts
@@ -19,6 +19,7 @@ import { fieldcontrol, FieldControlTokens } from './fieldControl';
 import { fieldgroup, FieldGroupTokens } from './fieldGroup';
 import { fieldset, FieldsetTokens } from './fieldset';
 import { fieldmessages, FieldMessagesTokens } from './fieldMessages';
+import { fileuploader, FileUploaderTokens } from './fileuploader';
 import { flex, FlexTokens } from './flex';
 import { heading, HeadingTokens } from './heading';
 import { highlightmatch, HighlightMatchTokens } from './highlightMatch';
@@ -80,6 +81,7 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
   fieldcontrol?: FieldControlTokens<Output>;
   fieldgroup?: FieldGroupTokens<Output>;
   fieldmessages?: FieldMessagesTokens<Output>;
+  fileuploader?: FileUploaderTokens<Output>;
   flex?: FlexTokens<Output>;
   heading?: HeadingTokens<Output>;
   highlightmatch?: HighlightMatchTokens<Output>;
@@ -149,6 +151,7 @@ export const components: DefaultComponentTokens = {
   fieldgroup,
   fieldmessages,
   fieldset,
+  fileuploader,
   flex,
   heading,
   icon,