diff --git a/apps/client/src/common/components/import-preview/PreviewColumn.module.scss b/apps/client/src/common/components/import-preview/PreviewColumn.module.scss
new file mode 100644
index 000000000..7fa0f6da7
--- /dev/null
+++ b/apps/client/src/common/components/import-preview/PreviewColumn.module.scss
@@ -0,0 +1,23 @@
+@use "../../../theme/_ontimeColours" as *;
+
+@mixin pad-item {
+ padding-left: 0.5rem;
+ padding-right: 1rem;
+}
+
+.previewTable {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: repeat(6, auto);
+ gap: 1px;
+}
+
+.field {
+ @include pad-item;
+ background-color: $gray-100;
+}
+
+.value {
+ @include pad-item;
+ background-color: $gray-50;
+}
diff --git a/apps/client/src/common/components/import-preview/PreviewProjectData.tsx b/apps/client/src/common/components/import-preview/PreviewProjectData.tsx
new file mode 100644
index 000000000..46eb00d47
--- /dev/null
+++ b/apps/client/src/common/components/import-preview/PreviewProjectData.tsx
@@ -0,0 +1,26 @@
+import { ProjectData } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewProjectDataProps {
+ project: ProjectData;
+}
+
+export default function PreviewProjectData({ project }: PreviewProjectDataProps) {
+ return (
+
+ Title
+ {project.title}
+ Description
+ {project.description}
+ Public URL
+ {project.publicUrl}
+ Public info
+ {project.publicInfo}
+ Backstage URL
+ {project.backstageUrl}
+ Backstage info
+ {project.backstageInfo}
+
+ );
+}
diff --git a/apps/client/src/common/components/import-preview/PreviewUserFields.tsx b/apps/client/src/common/components/import-preview/PreviewUserFields.tsx
new file mode 100644
index 000000000..119de7d65
--- /dev/null
+++ b/apps/client/src/common/components/import-preview/PreviewUserFields.tsx
@@ -0,0 +1,34 @@
+import { UserFields } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewUserFieldProps {
+ userFields: UserFields;
+}
+
+export default function PreviewUserField({ userFields }: PreviewUserFieldProps) {
+ return (
+
+ user0
+ {userFields.user0}
+ user1
+ {userFields.user1}
+ user2
+ {userFields.user2}
+ user3
+ {userFields.user3}
+ user4
+ {userFields.user4}
+ user5
+ {userFields.user5}
+ user6
+ {userFields.user6}
+ user7
+ {userFields.user7}
+ user8
+ {userFields.user8}
+ user9
+ {userFields.user9}
+
+ );
+}
diff --git a/apps/client/src/features/modals/upload-modal/UploadModal.tsx b/apps/client/src/features/modals/upload-modal/UploadModal.tsx
index 0afd26382..f9ed44440 100644
--- a/apps/client/src/features/modals/upload-modal/UploadModal.tsx
+++ b/apps/client/src/features/modals/upload-modal/UploadModal.tsx
@@ -25,6 +25,11 @@ import ModalSplitInput from '../ModalSplitInput';
import { validateFile } from './utils';
import style from './UploadModal.module.scss';
+import PreviewProjectData from '../../../common/components/import-preview/PreviewProjectData';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
+import CollapsableInfo from '../../info/CollapsableInfo';
+import PreviewUserField from '../../../common/components/import-preview/PreviewUserFields';
+import { userFieldsPlaceholder } from '../../../common/models/UserFields';
interface UploadModalProps {
onClose: () => void;
@@ -154,6 +159,8 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
+
+