diff --git a/web/crux-ui/locales/en/images.json b/web/crux-ui/locales/en/images.json
index 51975459b..eb72e6cb4 100644
--- a/web/crux-ui/locales/en/images.json
+++ b/web/crux-ui/locales/en/images.json
@@ -24,5 +24,6 @@
   "unknownTag": "unknown",
   "invalidImageFormat": "Invalid format, please use 'NAME[:TAG]'",
   "tagRequired": "Tag is required",
-  "uncheckedRegistryExplanation": "Please be aware that you are using an unchecked registry. The tag you enter will be used directly, which means if the tag does not exist, the deployment will fail."
+  "uncheckedRegistryExplanation": "Please be aware that you are using an unchecked registry. The tag you enter will be used directly, which means if the tag does not exist, the deployment will fail.",
+  "order": "Order"
 }
diff --git a/web/crux-ui/src/components/projects/versions/version-view-list.tsx b/web/crux-ui/src/components/projects/versions/version-view-list.tsx
index d968e3bb6..da3103116 100644
--- a/web/crux-ui/src/components/projects/versions/version-view-list.tsx
+++ b/web/crux-ui/src/components/projects/versions/version-view-list.tsx
@@ -2,7 +2,7 @@ import { DyoCard } from '@app/elements/dyo-card'
 import DyoIcon from '@app/elements/dyo-icon'
 import DyoLink from '@app/elements/dyo-link'
 import DyoModal, { DyoConfirmationModal } from '@app/elements/dyo-modal'
-import DyoTable, { DyoColumn, sortDate, sortString } from '@app/elements/dyo-table'
+import DyoTable, { DyoColumn, sortDate, sortNumber, sortString } from '@app/elements/dyo-table'
 import useConfirmation from '@app/hooks/use-confirmation'
 import useTeamRoutes from '@app/hooks/use-team-routes'
 import { DeleteImageMessage, VersionImage, WS_TYPE_DELETE_IMAGE } from '@app/models'
@@ -54,6 +54,14 @@ const VersionViewList = (props: VersionViewListProps) => {
     <>
       <DyoCard className="relative mt-4">
         <DyoTable data={state.version.images} dataKey="id" initialSortColumn={0} initialSortDirection="asc">
+          <DyoColumn
+            className="w-1/12"
+            header={t('order')}
+            sortField="order"
+            sortable
+            sort={sortNumber}
+            body={data => `#${data.order + 1}`}
+          />
           <DyoColumn header={t('containerName')} field="config.name" sortable sort={sortString} />
           <DyoColumn
             header={t('common:registry')}
diff --git a/web/crux-ui/src/elements/dyo-table.tsx b/web/crux-ui/src/elements/dyo-table.tsx
index c86e4b2b2..d333e3735 100644
--- a/web/crux-ui/src/elements/dyo-table.tsx
+++ b/web/crux-ui/src/elements/dyo-table.tsx
@@ -284,7 +284,7 @@ const DyoTable = <T,>(props: React.PropsWithChildren<DyoTableProps<T>>) => {
           return (
             <tr key={key} className={headless ? null : 'hover:bg-medium-muted'}>
               {columns.map((col, index) => {
-                const cellData = col.field ? getField(it, col.field) : col.body ? col.body(it, index) : null
+                const cellData = col.field ? getField(it, col.field) : col.body ? col.body(it, rowIndex) : null
                 const paddingClass = index === 0 ? 'pl-6' : index === columns.length - 1 ? 'pr-6' : null
                 const cursorClass = click && !col.preventClickThrough ? 'cursor-pointer' : null
 
diff --git a/web/crux/package-lock.json b/web/crux/package-lock.json
index 2bbbb24df..2a82c190d 100644
--- a/web/crux/package-lock.json
+++ b/web/crux/package-lock.json
@@ -4570,9 +4570,10 @@
       "dev": true
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -11255,9 +11256,10 @@
       }
     },
     "node_modules/run-applescript/node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
+      "license": "MIT",
       "dependencies": {
         "nice-try": "^1.0.4",
         "path-key": "^2.0.1",
diff --git a/web/crux/prisma/migrations/20241126252000_normalize_image_order/migration.sql b/web/crux/prisma/migrations/20241126252000_normalize_image_order/migration.sql
new file mode 100644
index 000000000..d3007b824
--- /dev/null
+++ b/web/crux/prisma/migrations/20241126252000_normalize_image_order/migration.sql
@@ -0,0 +1,11 @@
+-- Create temp table
+SELECT "versionId", MIN("order") "order" INTO "_prisma_migrations_NormalizeOrder" FROM "Image" GROUP BY "versionId";
+
+-- Normalize orders
+UPDATE "Image" "img" SET "order" = "order" - (
+	SELECT "order" FROM "_prisma_migrations_NormalizeOrder" "norm"
+    WHERE "norm"."versionId" = "img"."versionId"
+);
+
+-- Drop temp table
+DROP TABLE "_prisma_migrations_NormalizeOrder";
diff --git a/web/crux/src/app/image/image.service.ts b/web/crux/src/app/image/image.service.ts
index 01cc04b9d..6d1aea352 100644
--- a/web/crux/src/app/image/image.service.ts
+++ b/web/crux/src/app/image/image.service.ts
@@ -109,7 +109,7 @@ export default class ImageService {
         },
       })
 
-      const lastOrder = lastImageOrder?.order ?? 0
+      const lastOrder = lastImageOrder?.order ?? -1
       let order = lastOrder + 1
 
       // we need the generated uuids, so we can't use createMany