diff --git a/.changeset/dull-stingrays-fix.md b/.changeset/dull-stingrays-fix.md
new file mode 100644
index 00000000000..7c2e680bbab
--- /dev/null
+++ b/.changeset/dull-stingrays-fix.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Enhance `CreateOrganizationForm` by replacing `AvatarPreview` with an upload button to prevent layout shifts
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index 0d89db40c5e..037f30bf8d9 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
 import { useCoreOrganization, useCoreOrganizationList } from '../../contexts';
-import { ContentPage, Form, FormButtonContainer, SuccessPage, useCardState } from '../../elements';
-import { QuestionMark } from '../../icons';
+import { Icon } from '../../customizables';
+import { ContentPage, Form, FormButtonContainer, IconButton, SuccessPage, useCardState } from '../../elements';
+import { Image, QuestionMark, Upload } from '../../icons';
 import type { LocalizationKey } from '../../localization';
 import { localizationKeys } from '../../localization';
 import { createSlug, handleError, useFormControl } from '../../utils';
@@ -27,6 +28,7 @@ type CreateOrganizationFormProps = {
 export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
   const card = useCardState();
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
+  const [isHovered, setIsHovered] = React.useState(false);
 
   const lastCreatedOrganizationRef = React.useRef<OrganizationResource | null>(null);
   const { createOrganization, isLoaded, setActive } = useCoreOrganizationList();
@@ -121,6 +123,31 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
             organization={{ name: nameField.value }}
             onAvatarChange={async file => await setFile(file)}
             onAvatarRemove={file ? onAvatarRemove : null}
+            avatarPreviewPlaceholder={
+              <IconButton
+                variant='ghost'
+                colorScheme='neutral'
+                aria-label='Upload image'
+                icon={
+                  <Icon
+                    size='md'
+                    icon={isHovered ? Upload : Image}
+                  />
+                }
+                sx={theme => ({
+                  width: theme.sizes.$11,
+                  height: theme.sizes.$11,
+                  borderRadius: theme.radii.$md,
+                  backgroundColor: theme.colors.$avatarBackground,
+                  ':hover': {
+                    backgroundColor: theme.colors.$avatarBackground,
+                    opacity: 0.8,
+                  },
+                })}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+              />
+            }
           />
           <Form.ControlRow elementId={nameField.id}>
             <Form.Control
diff --git a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
index f47b3f7fbc9..38b488afc8e 100644
--- a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
+++ b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
@@ -11,6 +11,7 @@ export type AvatarUploaderProps = {
   avatarPreview: React.ReactElement;
   onAvatarChange: (file: File) => Promise<unknown>;
   onAvatarRemove?: (() => void) | null;
+  avatarPreviewPlaceholder?: React.ReactElement | null;
 };
 
 export const fileToBase64 = (file: File): Promise<string> => {
@@ -27,7 +28,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
   const [objectUrl, setObjectUrl] = React.useState<string>();
   const card = useCardState();
 
-  const { onAvatarChange, onAvatarRemove, title, avatarPreview, ...rest } = props;
+  const { onAvatarChange, onAvatarRemove, title, avatarPreview, avatarPreviewPlaceholder, ...rest } = props;
 
   const toggle = () => {
     setShowUpload(!showUpload);
@@ -54,6 +55,12 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
     return onAvatarRemove?.();
   };
 
+  const previewElement = objectUrl
+    ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })
+    : avatarPreviewPlaceholder
+    ? React.cloneElement(avatarPreviewPlaceholder, { onClick: toggle })
+    : avatarPreview;
+
   return (
     <Col gap={4}>
       <Flex
@@ -61,7 +68,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
         align='center'
         {...rest}
       >
-        {objectUrl ? React.cloneElement(avatarPreview, { imageUrl: objectUrl }) : avatarPreview}
+        {previewElement}
         <Col gap={1}>
           <Text
             localizationKey={title}
diff --git a/packages/clerk-js/src/ui/icons/image.svg b/packages/clerk-js/src/ui/icons/image.svg
new file mode 100644
index 00000000000..084544bfd34
--- /dev/null
+++ b/packages/clerk-js/src/ui/icons/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.2 21H6.931c-.605 0-.908 0-1.049-.12a.5.5 0 0 1-.173-.42c.014-.183.228-.397.657-.826l8.503-8.503c.396-.396.594-.594.822-.668a1 1 0 0 1 .618 0c.228.074.426.272.822.668L21 15v1.2M16.2 21c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 18.72 21 17.88 21 16.2M16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4M10.5 8.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg>
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/icons/index.ts b/packages/clerk-js/src/ui/icons/index.ts
index 3f9a2b63611..a0b7ca9cd9f 100644
--- a/packages/clerk-js/src/ui/icons/index.ts
+++ b/packages/clerk-js/src/ui/icons/index.ts
@@ -7,41 +7,43 @@
 export { default as ArrowLeftIcon } from './arrow-left.svg';
 export { default as ArrowRightIcon } from './arrow-right.svg';
 export { default as AuthApp } from './auth-app.svg';
-export { default as Clipboard } from './clipboard.svg';
+export { default as Billing } from './billing.svg';
+export { default as Caret } from './caret.svg';
+export { default as ChatAltIcon } from './chat-alt.svg';
 export { default as CheckCircle } from './check-circle.svg';
-export { default as ExclamationTriangle } from './exclamation-triangle.svg';
+export { default as Clipboard } from './clipboard.svg';
+export { default as Close } from './close.svg';
+export { default as CogFilled } from './cog-filled.svg';
+export { default as DeviceLaptop } from './device-laptop.svg';
+export { default as DeviceMobile } from './device-mobile.svg';
+export { default as DotCircle } from './dot-circle-horizontal.svg';
+export { default as Email } from './email.svg';
 export { default as ExclamationCircle } from './exclamation-circle.svg';
+export { default as ExclamationTriangle } from './exclamation-triangle.svg';
 export { default as EyeSlash } from './eye-slash.svg';
+export { default as Eye } from './eye.svg';
+export { default as Folder } from './folder.svg';
+export { default as Image } from './image.svg';
 export { default as InformationCircle } from './information-circle.svg';
+export { default as LinkIcon } from './link.svg';
+export { default as LockClosedIcon } from './lock-closed.svg';
+export { default as LogoMark } from './logo-mark-new.svg';
 export { default as MagnifyingGlass } from './magnifying-glass.svg';
-export { default as Caret } from './caret.svg';
+export { default as Menu } from './menu.svg';
+export { default as Mobile } from './mobile-small.svg';
 export { default as PencilEdit } from './pencil-edit.svg';
 export { default as Pencil } from './pencil.svg';
-export { default as Email } from './email.svg';
-export { default as TickShield } from './tick-shield.svg';
-export { default as SwitchArrows } from './switch-arrows.svg';
-export { default as LogoMark } from './logo-mark-new.svg';
-export { default as SignOut } from './signout.svg';
-export { default as SignOutDouble } from './signout-double.svg';
 export { default as Plus } from './plus.svg';
-export { default as CogFilled } from './cog-filled.svg';
-export { default as LinkIcon } from './link.svg';
-export { default as LockClosedIcon } from './lock-closed.svg';
-export { default as ChatAltIcon } from './chat-alt.svg';
+export { default as QuestionMark } from './question-mark.svg';
 export { default as RequestAuthIcon } from './request-auth.svg';
-export { default as User } from './user.svg';
-export { default as Mobile } from './mobile-small.svg';
-export { default as Folder } from './folder.svg';
-export { default as DeviceMobile } from './device-mobile.svg';
-export { default as DeviceLaptop } from './device-laptop.svg';
-export { default as Menu } from './menu.svg';
-export { default as Eye } from './eye.svg';
-export { default as DotCircle } from './dot-circle-horizontal.svg';
 export { default as Selector } from './selector.svg';
+export { default as SignOutDouble } from './signout-double.svg';
+export { default as SignOut } from './signout.svg';
+export { default as SwitchArrows } from './switch-arrows.svg';
+export { default as ThreeDots } from './threeDots.svg';
+export { default as TickShield } from './tick-shield.svg';
 export { default as Times } from './times.svg';
 export { default as Trash } from './trash.svg';
+export { default as Upload } from './upload.svg';
+export { default as User } from './user.svg';
 export { default as UserAdd } from './userAdd.svg';
-export { default as ThreeDots } from './threeDots.svg';
-export { default as Billing } from './billing.svg';
-export { default as Close } from './close.svg';
-export { default as QuestionMark } from './question-mark.svg';
diff --git a/packages/clerk-js/src/ui/icons/upload.svg b/packages/clerk-js/src/ui/icons/upload.svg
new file mode 100644
index 00000000000..404b0988bdf
--- /dev/null
+++ b/packages/clerk-js/src/ui/icons/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-7-5-5m0 0L7 8m5-5v12"/></svg>
\ No newline at end of file