diff --git a/app/api/v2/barometers/[slug]/getters.ts b/app/api/v2/barometers/[slug]/getters.ts
index 334df6c1..a1600e64 100644
--- a/app/api/v2/barometers/[slug]/getters.ts
+++ b/app/api/v2/barometers/[slug]/getters.ts
@@ -36,6 +36,7 @@ export const getBarometer = withPrisma(async (prisma, slug: string) => {
               slug: true,
             },
           },
+          images: true,
         },
       },
       images: {
diff --git a/app/api/v2/manufacturers/getters.ts b/app/api/v2/manufacturers/getters.ts
index 91dc89fd..59aa4302 100644
--- a/app/api/v2/manufacturers/getters.ts
+++ b/app/api/v2/manufacturers/getters.ts
@@ -16,6 +16,15 @@ export const getManufacturers = withPrisma(async (prisma, page: number, pageSize
       take: pageSize || undefined,
       include: {
         countries: true,
+        images: {
+          select: {
+            url: true,
+            id: true,
+            blurData: true,
+            order: true,
+            name: true,
+          },
+        },
         predecessors: {
           select: {
             id: true,
diff --git a/app/api/v2/manufacturers/route.ts b/app/api/v2/manufacturers/route.ts
index c9a263a0..b07157d7 100644
--- a/app/api/v2/manufacturers/route.ts
+++ b/app/api/v2/manufacturers/route.ts
@@ -11,6 +11,7 @@ import { FrontRoutes } from '@/utils/routes-front'
 interface ManufacturerDTO extends Manufacturer {
   successors?: { id: string }[]
   countries?: { id: number }[]
+  images?: { id: string; url: string; blurData: string }[]
 }
 /**
  * Retrieve a list of all Manufacturers
@@ -35,7 +36,7 @@ export async function GET(req: NextRequest) {
  */
 export const POST = withPrisma(async (prisma, req: NextRequest) => {
   try {
-    const { successors, countries, ...manufData }: ManufacturerDTO = await req
+    const { successors, countries, images, ...manufData }: ManufacturerDTO = await req
       .json()
       .then(cleanObject)
 
@@ -57,6 +58,13 @@ export const POST = withPrisma(async (prisma, req: NextRequest) => {
               },
             }
           : {}),
+        ...(images
+          ? {
+              images: {
+                create: images,
+              },
+            }
+          : {}),
       },
     })
 
@@ -77,12 +85,14 @@ export const POST = withPrisma(async (prisma, req: NextRequest) => {
  */
 export const PUT = withPrisma(async (prisma, req: NextRequest) => {
   try {
-    const { successors, countries, ...manufData }: ManufacturerDTO = await req.json().then(data =>
-      // replace empty strings with NULLs
-      traverse.map(data, function map(node) {
-        if (node === '') this.update(null)
-      }),
-    )
+    const { successors, countries, images, ...manufData }: ManufacturerDTO = await req
+      .json()
+      .then(data =>
+        // replace empty strings with NULLs
+        traverse.map(data, function map(node) {
+          if (node === '') this.update(null)
+        }),
+      )
     const manufacturer = await prisma.manufacturer.findUnique({ where: { id: manufData.id } })
     if (!manufacturer) {
       return NextResponse.json({ message: 'Manufacturer not found' }, { status: 404 })
@@ -91,32 +101,46 @@ export const PUT = withPrisma(async (prisma, req: NextRequest) => {
     const slug = manufData.name
       ? getBrandSlug(manufData.name, manufData.firstName)
       : manufacturer.slug
-    const updatedManufacturer = await prisma.manufacturer.update({
-      where: { id: manufacturer.id },
-      data: {
-        ...manufData,
-        ...(successors
-          ? {
-              successors: {
-                set: successors,
-              },
-            }
-          : {}),
-        ...(countries
-          ? {
-              countries: {
-                set: countries,
-              },
-            }
-          : {}),
-        slug,
-      },
+    await prisma.$transaction(async tx => {
+      await Promise.all([
+        // delete old images if the new ones are provided
+        images
+          ? tx.image.deleteMany({ where: { barometers: { some: { id: manufacturer.id } } } })
+          : Promise.resolve(),
+        await tx.manufacturer.update({
+          where: { id: manufacturer.id },
+          data: {
+            ...manufData,
+            ...(successors
+              ? {
+                  successors: {
+                    set: successors,
+                  },
+                }
+              : {}),
+            ...(countries
+              ? {
+                  countries: {
+                    set: countries,
+                  },
+                }
+              : {}),
+            images: images
+              ? {
+                  deleteMany: {},
+                  create: images,
+                }
+              : {},
+            slug,
+          },
+        }),
+      ])
     })
 
     revalidatePath(trimTrailingSlash(FrontRoutes.Brands))
     revalidatePath(FrontRoutes.Brands + slug)
     await revalidateSuccessors(successors)
-    return NextResponse.json(updatedManufacturer, { status: 200 })
+    return NextResponse.json({ slug }, { status: 200 })
   } catch (error) {
     console.error(error)
     return NextResponse.json(
diff --git a/app/collection/items/[slug]/components/edit-fields/images-edit.tsx b/app/collection/items/[slug]/components/edit-fields/images-edit.tsx
index 5aa273f7..a7338e88 100644
--- a/app/collection/items/[slug]/components/edit-fields/images-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/images-edit.tsx
@@ -26,7 +26,6 @@ import {
 import { useEffect, useMemo, useState } from 'react'
 import { useDisclosure } from '@mantine/hooks'
 import { BarometerDTO } from '@/app/types'
-import sx from './styles.module.scss'
 import { googleStorageImagesFolder } from '@/utils/constants'
 import { FrontRoutes } from '@/utils/routes-front'
 import { showError, showInfo } from '@/utils/notification'
@@ -76,7 +75,7 @@ function SortableImage({
       />
       <Box {...listeners}>
         <NextImage
-          className={sx.thumbnail}
+          className="h-auto w-auto"
           alt="Barometer"
           key={image}
           src={googleStorageImagesFolder + image}
@@ -113,7 +112,7 @@ export function ImagesEdit({ barometer, size, ...props }: ImagesEditProps) {
       form.setFieldValue('images', newOrder)
     }
   }
-  const updateBarometerWithImages = async (values: FormProps) => {
+  const update = async (values: FormProps) => {
     // exit if no image was changed
     if (isEqual(values.images, barometer.images)) {
       close()
@@ -227,16 +226,16 @@ export function ImagesEdit({ barometer, size, ...props }: ImagesEditProps) {
         centered
         opened={opened}
         onClose={onClose}
-        classNames={{ title: sx.imageEditModalTitle }}
+        styles={{ title: { fontWeight: 500, fontSize: '22px' } }}
       >
-        <Box pos="relative" component="form" onSubmit={form.onSubmit(updateBarometerWithImages)}>
+        <Box pos="relative" component="form" onSubmit={form.onSubmit(update)}>
           <LoadingOverlay visible={isUploading} zIndex={100} />
           <Stack>
             <FileButton multiple onChange={uploadImages} accept="image/**">
               {fbProps => (
                 <Button
                   color="dark.4"
-                  className={sx.addImageBtn}
+                  className="self-start"
                   leftSection={<IconPhotoPlus />}
                   {...fbProps}
                 >
@@ -262,7 +261,7 @@ export function ImagesEdit({ barometer, size, ...props }: ImagesEditProps) {
         </Box>
       </Modal>
       <Tooltip label="Edit images">
-        <UnstyledButton className={sx.imageEdit} {...props} onClick={open}>
+        <UnstyledButton className="absolute right-20 top-0 z-10" {...props} onClick={open}>
           <IconEdit color="brown" size={size} />
         </UnstyledButton>
       </Tooltip>
diff --git a/app/collection/items/[slug]/components/edit-fields/manufacturer-edit.tsx b/app/collection/items/[slug]/components/edit-fields/manufacturer-edit.tsx
index 87678be1..d1beef98 100644
--- a/app/collection/items/[slug]/components/edit-fields/manufacturer-edit.tsx
+++ b/app/collection/items/[slug]/components/edit-fields/manufacturer-edit.tsx
@@ -1,8 +1,6 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Modal,
   UnstyledButton,
@@ -17,6 +15,7 @@ import {
   Select,
   Group,
   MultiSelect,
+  LoadingOverlay,
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { isLength, isURL } from 'validator'
@@ -26,23 +25,19 @@ import type { BarometerDTO } from '@/app/types'
 import { showError, showInfo } from '@/utils/notification'
 import { FrontRoutes } from '@/utils/routes-front'
 import { useBarometers } from '@/app/hooks/useBarometers'
-import { updateBarometer, updateManufacturer } from '@/utils/fetch'
+import { deleteImage, updateBarometer, updateManufacturer } from '@/utils/fetch'
+import { ManufacturerImageEdit } from './manufacturer-image-edit'
+import { type ManufacturerForm } from './types'
+import { getThumbnailBase64 } from '@/utils/misc'
+import { googleStorageImagesFolder } from '@/utils/constants'
 
 interface ManufacturerEditProps extends UnstyledButtonProps {
   size?: string | number | undefined
   barometer: BarometerDTO
 }
 
-interface Form {
-  name: string
-  firstName: string
-  city: string
-  countries: number[]
-  url: string
-  description: string
-  successors: string[]
-}
-const initialValues: Form = {
+const initialValues: ManufacturerForm = {
+  id: '',
   name: '',
   firstName: '',
   city: '',
@@ -50,11 +45,21 @@ const initialValues: Form = {
   url: '',
   description: '',
   successors: [],
+  images: [],
 }
 export function ManufacturerEdit({ size = 18, barometer, ...props }: ManufacturerEditProps) {
+  const [isLoading, setIsLoading] = useState(false)
   const { manufacturers, countries } = useBarometers()
   const [selectedManufacturerIndex, setSelectedManufacturerIndex] = useState<number>(0)
-  const form = useForm<Form>({
+  const currentBrand = useMemo(
+    () => manufacturers.data[selectedManufacturerIndex],
+    [manufacturers.data, selectedManufacturerIndex],
+  )
+  const brandImages = useMemo(
+    () => currentBrand?.images?.map(({ url }) => url),
+    [currentBrand?.images],
+  )
+  const form = useForm<ManufacturerForm>({
     initialValues,
     validate: {
       name: val =>
@@ -68,6 +73,19 @@ export function ManufacturerEdit({ size = 18, barometer, ...props }: Manufacture
   })
 
   const [opened, { open, close }] = useDisclosure()
+  const onClose = async () => {
+    // delete unused files from storage
+    try {
+      setIsLoading(true)
+      const extraImages = form.values.images.filter(img => !brandImages?.includes(img))
+      await Promise.all(extraImages.map(deleteImage))
+    } catch (error) {
+      // do nothing
+    } finally {
+      setIsLoading(false)
+      close()
+    }
+  }
 
   // Reset selected manufacturer index
   const resetManufacturerIndex = useCallback(() => {
@@ -82,38 +100,64 @@ export function ManufacturerEdit({ size = 18, barometer, ...props }: Manufacture
     if (!opened) return
     resetManufacturerIndex()
     form.reset()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [opened, resetManufacturerIndex])
 
   // Set form values when selected manufacturer index changes
   useEffect(() => {
-    const selectedManufacturer = manufacturers?.data[selectedManufacturerIndex]
     // pick all manufacturer fields and put empty string if not present
     const manufacturerFormData = {
-      id: selectedManufacturer?.id ?? '',
-      name: selectedManufacturer?.name ?? '',
-      firstName: selectedManufacturer?.firstName ?? '',
-      city: selectedManufacturer?.city ?? '',
-      countries: selectedManufacturer?.countries.map(({ id }) => id) ?? [],
-      description: selectedManufacturer?.description ?? '',
-      url: selectedManufacturer?.url ?? '',
-      successors: selectedManufacturer?.successors.map(({ id }) => id) ?? [],
-    } as Form
+      id: currentBrand?.id ?? '',
+      name: currentBrand?.name ?? '',
+      firstName: currentBrand?.firstName ?? '',
+      city: currentBrand?.city ?? '',
+      countries: currentBrand?.countries?.map(({ id }) => id) ?? [],
+      description: currentBrand?.description ?? '',
+      url: currentBrand?.url ?? '',
+      successors: currentBrand?.successors?.map(({ id }) => id) ?? [],
+      images: currentBrand?.images?.map(({ url }) => url) ?? [],
+    } satisfies ManufacturerForm
     form.setValues(manufacturerFormData)
     form.resetDirty(manufacturerFormData)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedManufacturerIndex, manufacturers])
 
   const update = useCallback(
-    async (formValues: Form) => {
+    async (formValues: ManufacturerForm) => {
+      setIsLoading(true)
       try {
-        const manufacturer = manufacturers.data[selectedManufacturerIndex]
+        // erase deleted images
+        const extraFiles = brandImages?.filter(url => !formValues.images.includes(url))
+        if (extraFiles)
+          await Promise.all(
+            extraFiles?.map(async file => {
+              try {
+                await deleteImage(file)
+              } catch (error) {
+                // don't mind if it was not possible to delete the file
+              }
+            }),
+          )
+
         const updatedBarometer = {
           id: barometer.id,
-          manufacturerId: manufacturer.id,
+          manufacturerId: currentBrand.id,
         }
         const updatedManufacturer = {
           ...formValues,
           successors: formValues.successors.map(id => ({ id })),
           countries: formValues.countries.map(id => ({ id })),
+          images: await Promise.all(
+            formValues.images.map(async (url, i) => {
+              const blurData = await getThumbnailBase64(googleStorageImagesFolder + url)
+              return {
+                url,
+                order: i,
+                name: barometer.name,
+                blurData,
+              }
+            }),
+          ),
         }
         const [{ slug }, { name }] = await Promise.all([
           updateBarometer(updatedBarometer),
@@ -123,15 +167,18 @@ export function ManufacturerEdit({ size = 18, barometer, ...props }: Manufacture
         close()
         window.location.href = FrontRoutes.Barometer + (slug ?? '')
       } catch (error) {
-        showError(error instanceof Error ? error.message : 'Error updating barometer')
+        showError(error instanceof Error ? error.message : 'Error updating manufacturer')
+      } finally {
+        setIsLoading(false)
       }
     },
-    [barometer.id, close, manufacturers.data, selectedManufacturerIndex],
+    [barometer.id, barometer.name, brandImages, close, currentBrand?.id],
   )
 
   return (
     <>
-      <Modal opened={opened} onClose={close} centered>
+      <Modal pos="relative" opened={opened} onClose={onClose} centered>
+        <LoadingOverlay visible={isLoading} zIndex={100} />
         <Box flex={1} component="form" onSubmit={form.onSubmit(update)}>
           <Group mb="lg" align="center">
             <Title order={3}>Edit Manufacturer</Title>
@@ -139,9 +186,7 @@ export function ManufacturerEdit({ size = 18, barometer, ...props }: Manufacture
               <ActionIcon
                 variant="outline"
                 color="dark"
-                onClick={() =>
-                  manufacturers.delete(manufacturers.data[selectedManufacturerIndex].slug)
-                }
+                onClick={() => manufacturers.delete(currentBrand?.slug)}
               >
                 <IconTrash />
               </ActionIcon>
@@ -189,6 +234,7 @@ export function ManufacturerEdit({ size = 18, barometer, ...props }: Manufacture
             value={form.values.successors}
             onChange={successors => form.setValues({ successors })}
           />
+          <ManufacturerImageEdit imageUrls={brandImages} form={form} setLoading={setIsLoading} />
           <Textarea
             autosize
             minRows={2}
diff --git a/app/collection/items/[slug]/components/edit-fields/manufacturer-image-edit.tsx b/app/collection/items/[slug]/components/edit-fields/manufacturer-image-edit.tsx
new file mode 100644
index 00000000..b103a2e3
--- /dev/null
+++ b/app/collection/items/[slug]/components/edit-fields/manufacturer-image-edit.tsx
@@ -0,0 +1,161 @@
+'use client'
+
+import { useCallback } from 'react'
+import NextImage from 'next/image'
+import { CSS } from '@dnd-kit/utilities'
+import {
+  arrayMove,
+  useSortable,
+  SortableContext,
+  horizontalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { DndContext, closestCenter } from '@dnd-kit/core'
+import { Fieldset, ActionIcon, FileButton, CloseButton } from '@mantine/core'
+import { IconPhotoPlus, IconXboxX } from '@tabler/icons-react'
+import { UseFormReturnType } from '@mantine/form'
+import { createImageUrls, deleteImage, uploadFileToCloud } from '@/utils/fetch'
+import { ManufacturerForm } from './types'
+import { showError } from '@/utils/notification'
+import { googleStorageImagesFolder } from '@/utils/constants'
+
+interface Props {
+  imageUrls: string[]
+  form: UseFormReturnType<ManufacturerForm, (values: ManufacturerForm) => ManufacturerForm>
+  setLoading: (loading: boolean) => void
+}
+
+function SortableImage({
+  image,
+  handleDelete,
+}: {
+  image: string
+  handleDelete: (image: string) => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: image,
+  })
+
+  return (
+    <div
+      className="relative shrink-0"
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      {...attributes}
+    >
+      <CloseButton
+        p={0}
+        c="dark.3"
+        radius={100}
+        size="1rem"
+        right={1}
+        top={1}
+        pos="absolute"
+        icon={<IconXboxX />}
+        bg="white"
+        onClick={() => handleDelete(image)}
+      />
+      <div {...listeners}>
+        <NextImage
+          className="h-auto w-auto"
+          alt="Barometer"
+          key={image}
+          src={googleStorageImagesFolder + image}
+          width={100}
+          height={200}
+        />
+      </div>
+    </div>
+  )
+}
+
+export function ManufacturerImageEdit({ imageUrls, form, setLoading }: Props) {
+  /**
+   * Upload images to google storage
+   */
+  const uploadImages = useCallback(async (files: File[]) => {
+    if (!files || !Array.isArray(files) || files.length === 0) return
+    setLoading(true)
+    try {
+      const urlsDto = await createImageUrls(
+        files.map(file => ({
+          fileName: file.name,
+          contentType: file.type,
+        })),
+      )
+      await Promise.all(
+        urlsDto.urls.map((urlObj, index) => uploadFileToCloud(urlObj.signed, files[index])),
+      )
+
+      const newImages = urlsDto.urls.map(url => url.public).filter(url => Boolean(url))
+      form.setFieldValue('images', prev => [...prev, ...newImages])
+    } catch (error) {
+      const defaultErrMsg = 'Error uploading files'
+      if (error instanceof Error) {
+        showError(error.message || defaultErrMsg)
+        return
+      }
+      showError(error instanceof Error ? error.message : defaultErrMsg)
+    } finally {
+      setLoading(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleDeleteFile = useCallback(
+    async (img: string) => {
+      setLoading(true)
+      try {
+        // if the image file was uploaded but not yet added to the entity
+        if (!imageUrls?.includes(img)) await deleteImage(img)
+        form.setFieldValue('images', old => old.filter(file => !file.includes(img)))
+      } catch (error) {
+        showError(error instanceof Error ? error.message : 'Error deleting file')
+      } finally {
+        setLoading(false)
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [imageUrls],
+  )
+
+  const handleDragEnd = useCallback((event: any) => {
+    const { active, over } = event
+    if (!over) return
+    if (active.id !== over.id) {
+      const oldIndex = form.values.images.findIndex(image => image === active.id)
+      const newIndex = form.values.images.findIndex(image => image === over.id)
+
+      const newOrder = arrayMove(form.values.images, oldIndex, newIndex)
+      form.setFieldValue('images', newOrder)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Fieldset pos="relative" legend="Images" my="xs" p="xs" pt={0}>
+      <div className="flex flex-nowrap gap-2">
+        <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext items={form.values.images} strategy={horizontalListSortingStrategy}>
+            <div className="grow overflow-x-auto">
+              <div className="flex flex-nowrap gap-1">
+                {form.values.images.map(img => (
+                  <SortableImage key={img} image={img} handleDelete={handleDeleteFile} />
+                ))}
+              </div>
+            </div>
+          </SortableContext>
+        </DndContext>
+        <FileButton multiple onChange={uploadImages} accept="image/*">
+          {fbProps => (
+            <ActionIcon variant="outline" color="primary" {...fbProps}>
+              <IconPhotoPlus color="var(--mantine-color-primary)" />
+            </ActionIcon>
+          )}
+        </FileButton>
+      </div>
+    </Fieldset>
+  )
+}
diff --git a/app/collection/items/[slug]/components/edit-fields/styles.module.scss b/app/collection/items/[slug]/components/edit-fields/styles.module.scss
deleted file mode 100644
index 38a716c9..00000000
--- a/app/collection/items/[slug]/components/edit-fields/styles.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.imageEdit {
-  position: absolute;
-  top: 0;
-  right: 5rem;
-  z-index: 2;
-}
-.imageEditModalTitle {
-  font-weight: 500;
-  font-size: 22px;
-}
-.thumbnail {
-  object-fit: cover;
-}
-.addImageBtn {
-  align-self: flex-start;
-}
\ No newline at end of file
diff --git a/app/collection/items/[slug]/components/edit-fields/types.ts b/app/collection/items/[slug]/components/edit-fields/types.ts
new file mode 100644
index 00000000..135772d7
--- /dev/null
+++ b/app/collection/items/[slug]/components/edit-fields/types.ts
@@ -0,0 +1,11 @@
+export interface ManufacturerForm {
+  id: string
+  name: string
+  firstName: string
+  city: string
+  countries: number[]
+  url: string
+  description: string
+  successors: string[]
+  images: string[]
+}