Index: src/main/java/mk/ukim/finki/synergymed/service/BrandedMedicineService.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/service/BrandedMedicineService.java	(revision 0316dec0ce0fab272562e850a37b7653804de51f)
+++ src/main/java/mk/ukim/finki/synergymed/service/BrandedMedicineService.java	(revision 30a24d5fe31d77745e8f6a188298f13a99c1f4d4)
@@ -15,26 +15,4 @@
     Optional<Brandedmedicine> findById(Integer id);
 
-    Brandedmedicine create(Integer manufacturerId,
-                           BigDecimal price,
-                           String description,
-                           String dosageForm,
-                           String strength,
-                           String originCountry,
-                           String name,
-                           MultipartFile[] images) throws IOException;
-
-    Brandedmedicine update(Integer id,
-                           Integer manufacturerId,
-                           BigDecimal price,
-                           String description,
-                           String dosageForm,
-                           String strength,
-                           String originCountry,
-                           String name,
-                           MultipartFile[] images,
-                           boolean replaceImagesIgnored) throws IOException;
-
-    void addImages(Integer brandedMedicineId, MultipartFile[] images) throws IOException;
-    void deleteImage(Integer imageId) throws IOException;
     void deleteById(Integer id) throws IOException;
 
@@ -44,4 +22,15 @@
     Map<Integer,String> cardImageUrlsFor(List<Brandedmedicine> medicines);
 
-    void setMainImage(Integer brandedMedicineId, Integer imageId);
+    void saveAll(Integer id,
+            Integer manufacturerId,
+            BigDecimal price,
+            String description,
+            String dosageForm,
+            String strength,
+            String originCountry,
+            String name,
+            MultipartFile[] newImages,
+            List<Integer> removeImageIds,
+            Integer mainExistingId,
+            Integer mainNewIndex) throws IOException;
 }
Index: src/main/java/mk/ukim/finki/synergymed/service/impl/BrandedMedicineServiceImpl.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/service/impl/BrandedMedicineServiceImpl.java	(revision 0316dec0ce0fab272562e850a37b7653804de51f)
+++ src/main/java/mk/ukim/finki/synergymed/service/impl/BrandedMedicineServiceImpl.java	(revision 30a24d5fe31d77745e8f6a188298f13a99c1f4d4)
@@ -27,5 +27,5 @@
 
     @Value("${app.upload.branded-medicine-dir:uploads/images/branded_medicine/}")
-    private String uploadDir; // write to ./uploads/images/branded_medicine/
+    private String uploadDir;
 
     private static final List<String> ALLOWED_EXTENSIONS =
@@ -42,17 +42,64 @@
 
     @Override
-    public List<Brandedmedicine> findAll() { return brandedMedicineRepository.findAll(); }
-
-    @Override
-    public Optional<Brandedmedicine> findById(Integer id) { return brandedMedicineRepository.findById(id); }
+    public List<Brandedmedicine> findAll() {
+        return brandedMedicineRepository.findAll();
+    }
+
+    @Override
+    public Optional<Brandedmedicine> findById(Integer id) {
+        return brandedMedicineRepository.findById(id);
+    }
+
+    @Override
+    public List<Brandedmedicineimage> listImages(Integer brandedMedicineId) {
+        return brandedMedicineImageRepository.findByBrandedMedicineIdOrderByIdAsc(brandedMedicineId);
+    }
+
+    @Override
+    public String cardImageUrl(Integer brandedMedicineId) {
+        return brandedMedicineImageRepository.findFirstByBrandedMedicineIdAndMainImageTrue(brandedMedicineId)
+                .map(Brandedmedicineimage::getImage)
+                .orElseGet(() -> brandedMedicineImageRepository
+                        .findFirstByBrandedMedicineIdOrderByIdAsc(brandedMedicineId)
+                        .map(Brandedmedicineimage::getImage)
+                        .orElse("/images/placeholder.png"));
+    }
+
+    @Override
+    public Map<Integer, String> cardImageUrlsFor(List<Brandedmedicine> medicines) {
+        Map<Integer,String> map = new HashMap<>();
+        for (Brandedmedicine bm : medicines) {
+            String url = cardImageUrl(bm.getId());
+            if (!url.startsWith("/")) url = "/" + url;
+            map.put(bm.getId(), url);
+        }
+        return map;
+    }
 
     @Override
     @Transactional
-    public Brandedmedicine create(Integer manufacturerId, BigDecimal price, String description,
-                                  String dosageForm, String strength, String originCountry,
-                                  String name, MultipartFile[] images) throws IOException {
+    public void saveAll(Integer id,
+                        Integer manufacturerId,
+                        BigDecimal price,
+                        String description,
+                        String dosageForm,
+                        String strength,
+                        String originCountry,
+                        String name,
+                        MultipartFile[] newImages,
+                        List<Integer> removeImageIds,
+                        Integer mainExistingId,
+                        Integer mainNewIndex) throws IOException {
+
+        Brandedmedicine bm;
+        if (id == null) {
+            bm = new Brandedmedicine();
+        } else {
+            bm = brandedMedicineRepository.findById(id)
+                    .orElseThrow(() -> new EntityNotFoundException("Branded medicine not found: " + id));
+        }
+
         Manufacturer m = manufacturerRepository.findById(manufacturerId)
                 .orElseThrow(() -> new EntityNotFoundException("Manufacturer not found: " + manufacturerId));
-        Brandedmedicine bm = new Brandedmedicine();
         bm.setManufacturer(m);
         bm.setPrice(price);
@@ -64,153 +111,97 @@
 
         Brandedmedicine saved = brandedMedicineRepository.save(bm);
-        if (images != null && images.length > 0) {
-            processImageUploads(images, saved);
-        }
-        return saved;
-    }
-
-    @Override
-    @Transactional
-    public Brandedmedicine update(Integer id, Integer manufacturerId, BigDecimal price, String description,
-                                  String dosageForm, String strength, String originCountry,
-                                  String name, MultipartFile[] images,
-                                  boolean replaceImagesIgnored) throws IOException {
-        Brandedmedicine bm = brandedMedicineRepository.findById(id)
-                .orElseThrow(() -> new EntityNotFoundException("Branded medicine not found: " + id));
-
-        if (manufacturerId != null) {
-            Manufacturer m = manufacturerRepository.findById(manufacturerId)
-                    .orElseThrow(() -> new EntityNotFoundException("Manufacturer not found: " + manufacturerId));
-            bm.setManufacturer(m);
-        }
-        if (price != null) bm.setPrice(price);
-        bm.setDescription(description);
-        bm.setDosageForm(dosageForm);
-        bm.setStrength(strength);
-        bm.setOriginCountry(originCountry);
-        bm.setName(name);
-
-        Brandedmedicine saved = brandedMedicineRepository.save(bm);
-        if (images != null && images.length > 0) {
-            processImageUploads(images, saved); // append only
-        }
-        return saved;
-    }
-
-    @Override
-    @Transactional
-    public void addImages(Integer brandedMedicineId, MultipartFile[] images) throws IOException {
-        if (images == null || images.length == 0) return;
-        Brandedmedicine bm = brandedMedicineRepository.findById(brandedMedicineId)
-                .orElseThrow(() -> new EntityNotFoundException("Branded medicine not found: " + brandedMedicineId));
-        processImageUploads(images, bm);
-    }
-
-    @Override
-    @Transactional
-    public void deleteImage(Integer imageId) throws IOException {
-        Brandedmedicineimage img = brandedMedicineImageRepository.findById(imageId)
-                .orElseThrow(() -> new EntityNotFoundException("Branded medicine image not found: " + imageId));
-
-        Integer bmId = img.getBrandedMedicine().getId();
-        boolean wasMain = img.isMainImage();
-
-        deletePhysicalFileIfExists(img.getImage());
-        brandedMedicineImageRepository.deleteById(imageId);
-
-        if (wasMain) {
-            brandedMedicineImageRepository.findFirstByBrandedMedicineIdOrderByIdAsc(bmId)
-                    .ifPresent(next -> {
-                        next.setMainImage(true);
-                        brandedMedicineImageRepository.save(next);
-                    });
-        }
-    }
-
+
+        if (removeImageIds != null && !removeImageIds.isEmpty()) {
+            List<Brandedmedicineimage> toRemove = brandedMedicineImageRepository.findAllById(removeImageIds);
+            for (Brandedmedicineimage img : toRemove) {
+                if (!Objects.equals(img.getBrandedMedicine().getId(), saved.getId())) continue;
+                deletePhysicalFileIfExists(img.getImage());
+            }
+            brandedMedicineImageRepository.deleteAll(toRemove);
+        }
+
+        List<Brandedmedicineimage> appended = new ArrayList<>();
+        if (newImages != null) {
+            Path base = ensureUploadPath();
+            long ts = System.currentTimeMillis();
+            int seq = 0;
+            for (MultipartFile file : newImages) {
+                if (file == null || file.isEmpty()) continue;
+                validateImageFile(file);
+
+                String original = Optional.ofNullable(file.getOriginalFilename()).orElse("image");
+                String ext = getFileExtension(original).toLowerCase(Locale.ROOT);
+                String filename = String.format("branded_medicine_%d_%d_%03d.%s", saved.getId(), ts, ++seq, ext);
+
+                Path dest = base.resolve(filename);
+                Files.copy(file.getInputStream(), dest, StandardCopyOption.REPLACE_EXISTING);
+
+                String url = "/uploads/images/branded_medicine/" + filename;
+
+                Brandedmedicineimage img = new Brandedmedicineimage();
+                img.setBrandedMedicine(saved);
+                img.setImage(url);
+                img.setMainImage(false);
+                appended.add(brandedMedicineImageRepository.save(img));
+            }
+        }
+
+        Integer targetMainId = null;
+
+        if (mainExistingId != null) {
+            brandedMedicineImageRepository.findById(mainExistingId).ifPresent(img -> {
+                if (Objects.equals(img.getBrandedMedicine().getId(), saved.getId())) {
+                    // capture via array holder
+                }
+            });
+            if (brandedMedicineImageRepository.findById(mainExistingId)
+                    .filter(img -> Objects.equals(img.getBrandedMedicine().getId(), saved.getId()))
+                    .isPresent()) {
+                targetMainId = mainExistingId;
+            }
+        }
+
+        if (targetMainId == null && mainNewIndex != null) {
+            if (mainNewIndex >= 0 && mainNewIndex < appended.size()) {
+                targetMainId = appended.get(mainNewIndex).getId();
+            }
+        }
+
+        if (targetMainId == null) {
+            Optional<Brandedmedicineimage> curMain = brandedMedicineImageRepository
+                    .findFirstByBrandedMedicineIdAndMainImageTrue(saved.getId());
+            if (curMain.isPresent()) {
+                targetMainId = curMain.get().getId();
+            } else {
+                targetMainId = brandedMedicineImageRepository
+                        .findFirstByBrandedMedicineIdOrderByIdAsc(saved.getId())
+                        .map(Brandedmedicineimage::getId).orElse(null);
+            }
+        }
+
+        if (targetMainId != null) {
+            List<Brandedmedicineimage> all = brandedMedicineImageRepository.findByBrandedMedicineId(saved.getId());
+            for (Brandedmedicineimage img : all) {
+                boolean shouldBeMain = Objects.equals(img.getId(), targetMainId);
+                if (img.isMainImage() != shouldBeMain) {
+                    img.setMainImage(shouldBeMain);
+                    brandedMedicineImageRepository.save(img);
+                }
+            }
+        }
+    }
     @Override
     @Transactional
     public void deleteById(Integer id) throws IOException {
         List<Brandedmedicineimage> imgs = brandedMedicineImageRepository.findByBrandedMedicineId(id);
-        for (Brandedmedicineimage img : imgs) deletePhysicalFileIfExists(img.getImage());
+        for (Brandedmedicineimage img : imgs) {
+            deletePhysicalFileIfExists(img.getImage());
+        }
+
         brandedMedicineImageRepository.deleteAll(imgs);
+
         brandedMedicineRepository.deleteById(id);
     }
 
-    // New: list images for edit page
-    @Override
-    public List<Brandedmedicineimage> listImages(Integer brandedMedicineId) {
-        return brandedMedicineImageRepository.findByBrandedMedicineIdOrderByIdAsc(brandedMedicineId);
-    }
-
-    // New: resolve card image URL (main or fallback, else placeholder)
-    @Override
-    public String cardImageUrl(Integer brandedMedicineId) {
-        return brandedMedicineImageRepository.findFirstByBrandedMedicineIdAndMainImageTrue(brandedMedicineId)
-                .map(Brandedmedicineimage::getImage)
-                .orElseGet(() -> brandedMedicineImageRepository
-                        .findFirstByBrandedMedicineIdOrderByIdAsc(brandedMedicineId)
-                        .map(Brandedmedicineimage::getImage)
-                        .orElse("/images/placeholder.png"));
-    }
-
-    // New: convenience map for list pages
-    @Override
-    public Map<Integer, String> cardImageUrlsFor(List<Brandedmedicine> medicines) {
-        Map<Integer,String> map = new HashMap<>();
-        for (Brandedmedicine bm : medicines) {
-            String url = cardImageUrl(bm.getId());
-            if (!url.startsWith("/")) url = "/" + url;
-            map.put(bm.getId(), url);
-        }
-        return map;
-    }
-
-    @Override
-    @Transactional
-    public void setMainImage(Integer brandedMedicineId, Integer imageId) {
-        Brandedmedicineimage chosen = brandedMedicineImageRepository.findById(imageId)
-                .orElseThrow(() -> new EntityNotFoundException("Image not found: " + imageId));
-        if (!Objects.equals(chosen.getBrandedMedicine().getId(), brandedMedicineId)) {
-            throw new IllegalArgumentException("Image does not belong to this Brandedmedicine");
-        }
-        List<Brandedmedicineimage> all = brandedMedicineImageRepository.findByBrandedMedicineId(brandedMedicineId);
-        for (Brandedmedicineimage img : all) {
-            boolean shouldBeMain = Objects.equals(img.getId(), imageId);
-            if (img.isMainImage() != shouldBeMain) {
-                img.setMainImage(shouldBeMain);
-                brandedMedicineImageRepository.save(img);
-            }
-        }
-    }
-
-    // ---------- helpers ----------
-
-    private void processImageUploads(MultipartFile[] images, Brandedmedicine bm) throws IOException {
-        Path base = ensureUploadPath();
-        long ts = System.currentTimeMillis();
-        int i = 0;
-
-        boolean hasMain = brandedMedicineImageRepository.existsByBrandedMedicineIdAndMainImageTrue(bm.getId());
-
-        for (MultipartFile file : images) {
-            if (file == null || file.isEmpty()) continue;
-            validateImageFile(file);
-
-            String original = Optional.ofNullable(file.getOriginalFilename()).orElse("image");
-            String ext = getFileExtension(original).toLowerCase(Locale.ROOT);
-            String filename = String.format("branded_medicine_%d_%d_%03d.%s", bm.getId(), ts, ++i, ext);
-
-            Path dest = base.resolve(filename);
-            Files.copy(file.getInputStream(), dest, StandardCopyOption.REPLACE_EXISTING);
-
-            String url = "/uploads/images/branded_medicine/" + filename;
-
-            Brandedmedicineimage img = new Brandedmedicineimage();
-            img.setBrandedMedicine(bm);
-            img.setImage(url);
-            img.setMainImage(!hasMain && i == 1); // first image if no main yet
-            brandedMedicineImageRepository.save(img);
-        }
-    }
 
     private Path ensureUploadPath() throws IOException {
@@ -219,4 +210,5 @@
         return p;
     }
+
 
     private void deletePhysicalFileIfExists(String storedUrl) throws IOException {
Index: src/main/java/mk/ukim/finki/synergymed/web/BrandedMedicineController.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/web/BrandedMedicineController.java	(revision 0316dec0ce0fab272562e850a37b7653804de51f)
+++ src/main/java/mk/ukim/finki/synergymed/web/BrandedMedicineController.java	(revision 30a24d5fe31d77745e8f6a188298f13a99c1f4d4)
@@ -13,5 +13,6 @@
 import java.io.IOException;
 import java.math.BigDecimal;
-import java.util.*;
+import java.util.List;
+import java.util.Map;
 
 @Controller
@@ -28,5 +29,4 @@
     }
 
-    // Home – list all branded medicines
     @GetMapping
     public String index(Model model) {
@@ -38,5 +38,4 @@
     }
 
-    // Create form
     @GetMapping("/branded-medicines/new")
     public String createForm(Model model) {
@@ -46,22 +45,4 @@
     }
 
-    // Create: saves fields, appends any images, then goes home
-    @PostMapping("/branded-medicines")
-    public String create(@RequestParam Integer manufacturerId,
-                         @RequestParam BigDecimal price,
-                         @RequestParam(required = false) String description,
-                         @RequestParam String dosageForm,
-                         @RequestParam String strength,
-                         @RequestParam(required = false) String originCountry,
-                         @RequestParam String name,
-                         @RequestParam(name = "images", required = false) MultipartFile[] images) throws IOException {
-
-        brandedMedicineService.create(
-                manufacturerId, price, description, dosageForm, strength, originCountry, name, images
-        );
-        return "redirect:/";
-    }
-
-    // Edit form (still available if needed)
     @GetMapping("/branded-medicines/{id}/edit")
     public String editForm(@PathVariable Integer id, Model model) {
@@ -69,4 +50,5 @@
                 .orElseThrow(() -> new EntityNotFoundException("Branded medicine not found: " + id));
         List<Brandedmedicineimage> images = brandedMedicineService.listImages(id);
+
         model.addAttribute("bm", bm);
         model.addAttribute("manufacturers", manufacturerService.findAll());
@@ -76,24 +58,35 @@
     }
 
-    // Update: saves fields, appends any images, then goes home
-    @PostMapping("/branded-medicines/{id}/update")
-    public String update(@PathVariable Integer id,
-                         @RequestParam Integer manufacturerId,
-                         @RequestParam BigDecimal price,
-                         @RequestParam(required = false) String description,
-                         @RequestParam String dosageForm,
-                         @RequestParam String strength,
-                         @RequestParam(required = false) String originCountry,
-                         @RequestParam String name,
-                         @RequestParam(name = "images", required = false) MultipartFile[] images) throws IOException {
+    @PostMapping("/branded-medicines/save")
+    public String save(
+            @RequestParam(required = false) Integer id,
+            @RequestParam Integer manufacturerId,
+            @RequestParam BigDecimal price,
+            @RequestParam(required = false) String description,
+            @RequestParam String dosageForm,
+            @RequestParam String strength,
+            @RequestParam(required = false) String originCountry,
+            @RequestParam String name,
 
-        // Service update already appends images if provided
-        brandedMedicineService.update(
-                id, manufacturerId, price, description, dosageForm, strength, originCountry, name, images, false
+            @RequestParam(name = "images", required = false) MultipartFile[] images,
+            @RequestParam(name = "removeImageIds", required = false) List<Integer> removeImageIds,
+
+            @RequestParam(name = "mainExistingId", required = false) String mainExistingIdStr,
+            @RequestParam(name = "mainNewIndex",   required = false) String mainNewIndexStr
+    ) throws IOException {
+
+        Integer mainExistingId = (mainExistingIdStr != null && mainExistingIdStr.matches("^\\d+$"))
+                ? Integer.valueOf(mainExistingIdStr) : null;
+        Integer mainNewIndex   = (mainNewIndexStr   != null && mainNewIndexStr.matches("^\\d+$"))
+                ? Integer.valueOf(mainNewIndexStr) : null;
+
+        brandedMedicineService.saveAll(
+                id, manufacturerId, price, description, dosageForm, strength, originCountry, name,
+                images, removeImageIds, mainExistingId, mainNewIndex
         );
         return "redirect:/";
     }
 
-    // Delete branded medicine (+ all images)
+
     @PostMapping("/branded-medicines/{id}/delete")
     public String deleteBrandedMedicine(@PathVariable Integer id) throws IOException {
@@ -101,16 +94,3 @@
         return "redirect:/";
     }
-
-    // Per-image actions (optional to keep; still useful if visiting the edit page)
-    @PostMapping("/branded-medicines/{bmId}/images/{imageId}/delete")
-    public String deleteImage(@PathVariable Integer bmId, @PathVariable Integer imageId) throws IOException {
-        brandedMedicineService.deleteImage(imageId);
-        return "redirect:/branded-medicines/" + bmId + "/edit";
-    }
-
-    @PostMapping("/branded-medicines/{bmId}/images/{imageId}/set-main")
-    public String setMain(@PathVariable Integer bmId, @PathVariable Integer imageId) {
-        brandedMedicineService.setMainImage(bmId, imageId);
-        return "redirect:/branded-medicines/" + bmId + "/edit";
-    }
 }
Index: src/main/resources/templates/branded-medicine-form.html
===================================================================
--- src/main/resources/templates/branded-medicine-form.html	(revision 0316dec0ce0fab272562e850a37b7653804de51f)
+++ src/main/resources/templates/branded-medicine-form.html	(revision 30a24d5fe31d77745e8f6a188298f13a99c1f4d4)
@@ -6,50 +6,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
-        :root{
-            --teal-1:#20b2aa;--teal-2:#48d1cc;--bg:#fefeff;--card:#ffffff;--muted:#6c757d;
-            --shadow:0 20px 40px rgba(0,0,0,.1);
-        }
+        :root{--teal-1:#20b2aa;--teal-2:#48d1cc;--bg:#fefeff;--card:#ffffff;--muted:#6c757d;--shadow:0 20px 40px rgba(0,0,0,.1)}
         *{margin:0;padding:0;box-sizing:border-box}
-        body{
-            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
-            background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%); padding:24px;
-        }
-        .wrap{width:100%; max-width:900px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow)}
-        .head{background:linear-gradient(135deg,var(--teal-1),var(--teal-2)); color:#fff; padding:26px 24px}
+        body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);padding:24px}
+        .wrap{width:100%;max-width:900px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
+        .head{background:linear-gradient(135deg,var(--teal-1),var(--teal-2));color:#fff;padding:26px 24px}
         .body{padding:26px 24px}
-        .row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
-        .row-1{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:6px}
-        label{display:block; margin-bottom:8px; color:#334155; font-weight:600; font-size:.95rem}
-        input,select,textarea{
-            width:100%; padding:14px 12px; border:2px solid #e6ebf0; border-radius:12px; background:#f8fafc;
-            transition:.2s ease; font-size:1rem
-        }
+        .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
+        .row-1{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:6px}
+        label{display:block;margin-bottom:8px;color:#334155;font-weight:600;font-size:.95rem}
+        input,select,textarea{width:100%;padding:14px 12px;border:2px solid #e6ebf0;border-radius:12px;background:#f8fafc;transition:.2s ease;font-size:1rem}
         textarea{min-height:110px}
-        input:focus,select:focus,textarea:focus{outline:none; border-color:var(--teal-1); background:#fff; box-shadow:0 0 0 3px rgba(32,178,170,.12)}
-        .hint{color:var(--muted); font-size:.86rem; margin-top:4px}
-        .section-title{margin:24px 0 10px; font-weight:800; color:#334155}
-        .actions{display:flex; gap:12px; padding-top:12px; flex-wrap:wrap}
-        .btn{border:none; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:700; letter-spacing:.4px}
-        .btn-primary{background:linear-gradient(135deg,var(--teal-1),var(--teal-2)); color:#fff; box-shadow:0 10px 20px rgba(32,178,170,.25)}
-        .btn-secondary{background:#fff; color:#111; border:2px solid rgba(32,178,170,.25)}
-        .btn-upload{background:#fff; color:#20b2aa; border:2px dashed rgba(32,178,170,.45)}
-        .btn:hover{transform:translateY(-1px)}
-
-        /* Gallery (separate from main form to avoid nested forms) */
-        .gallery{ padding:0 24px 24px 24px; }
-        .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:12px; }
-        .img-card{ position:relative; background:#f8fafc; border:1px solid #e6ebf0; border-radius:12px; padding:8px; }
-        .thumb{ width:100%; height:110px; object-fit:cover; border-radius:8px; display:block; }
-        .chip{ margin-top:8px; color:#20b2aa; font-weight:700; text-align:center; }
-        .icon-btn{
-            background:#fff; border:1px solid #e5e7eb; border-radius:50%; width:28px; height:28px;
-            cursor:pointer; line-height:26px; text-align:center; font-weight:700;
-        }
-        .small-btn{
-            background:#fff; border:2px solid rgba(32,178,170,.25); color:#20b2aa;
-            padding:6px 10px; border-radius:10px; cursor:pointer; font-weight:600;
-        }
-        @media (max-width:720px){ .row{grid-template-columns:1fr} }
+        input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-1);background:#fff;box-shadow:0 0 0 3px rgba(32,178,170,.12)}
+        .hint{color:var(--muted);font-size:.86rem;margin-top:4px}
+        .actions{display:flex;gap:12px;padding-top:12px;flex-wrap:wrap}
+        .btn{border:none;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.4px}
+        .btn-primary{background:linear-gradient(135deg,var(--teal-1),var(--teal-2));color:#fff;box-shadow:0 10px 20px rgba(32,178,170,.25)}
+        .btn-secondary{background:#fff;color:#111;border:2px solid rgba(32,178,170,.25)}
+        .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
+        .img-card{position:relative;background:#f8fafc;border:1px solid #e6ebf0;border-radius:12px;padding:8px}
+        .thumb{width:100%;height:110px;object-fit:cover;border-radius:8px;display:block}
+        @media (max-width:720px){.row{grid-template-columns:1fr}}
     </style>
 </head>
@@ -61,78 +36,7 @@
 
     <div class="body">
-        <!-- CREATE MODE: one form, two submit targets using formaction -->
-        <form th:if="${mode=='create'}"
-              th:action="@{/branded-medicines}"  <!-- default for the 'Create' button -->
-        method="post" enctype="multipart/form-data">
-
-        <div class="row">
-            <div>
-                <label>Manufacturer</label>
-                <select name="manufacturerId" required>
-                    <option value="" disabled selected>Select manufacturer</option>
-                    <option th:each="m : ${manufacturers}" th:value="${m.id}" th:text="${m.company.companyName}">Manufacturer</option>
-                </select>
-                <div class="hint">Pick the company that manufactured this medicine.</div>
-            </div>
-            <div>
-                <label>Price</label>
-                <input type="number" step="0.01" name="price" required/>
-            </div>
-        </div>
-
-        <div class="row">
-            <div>
-                <label>Dosage Form</label>
-                <input type="text" name="dosageForm" required/>
-            </div>
-            <div>
-                <label>Strength</label>
-                <input type="text" name="strength" required/>
-            </div>
-        </div>
-
-        <div class="row">
-            <div>
-                <label>Origin Country</label>
-                <input type="text" name="originCountry"/>
-            </div>
-            <div>
-                <label>Name</label>
-                <input type="text" name="name" required/>
-            </div>
-        </div>
-
-        <div class="row-1">
-            <div>
-                <label>Description</label>
-                <textarea name="description"></textarea>
-            </div>
-            <div>
-                <label>Images</label>
-                <input type="file" name="images" multiple accept="image/*"/>
-                <div class="hint">PNG, JPG, GIF, WEBP up to 5MB each. Uploaded files are saved with the record.</div>
-            </div>
-        </div>
-
-        <div class="actions">
-            <!-- Upload (create the record with images, then stay on edit to choose main) -->
-            <button class="btn btn-upload" type="submit"
-                    th:formaction="@{/branded-medicines/create-and-stay}">
-                Upload
-            </button>
-
-            <!-- Create (create with images and return home) -->
-            <button class="btn btn-primary" type="submit">
-                Create
-            </button>
-
-            <a class="btn btn-secondary" th:href="@{/}">Cancel</a>
-        </div>
-        </form>
-
-        <!-- EDIT MODE: update fields and exit to home -->
-        <form th:if="${mode=='edit'}"
-              th:action="@{/branded-medicines/{id}/update-and-exit(id=${bm.id})}"
-              method="post" enctype="multipart/form-data">
+        <!-- Single SAVE form for both create and edit -->
+        <form th:action="@{/branded-medicines/save}" method="post" enctype="multipart/form-data" id="saveForm">
+            <input type="hidden" name="id" th:if="${mode=='edit'}" th:value="${bm.id}"/>
 
             <div class="row">
@@ -140,8 +44,9 @@
                     <label>Manufacturer</label>
                     <select name="manufacturerId" required>
+                        <option th:if="${mode=='create'}" value="" disabled selected>Select manufacturer</option>
                         <option th:each="m : ${manufacturers}"
                                 th:value="${m.id}"
                                 th:text="${m.company.companyName}"
-                                th:selected="${bm != null and bm.manufacturer != null and m.id == bm.manufacturer.id}">
+                                th:selected="${mode=='edit' and bm.manufacturer != null and m.id == bm.manufacturer.id}">
                             Manufacturer
                         </option>
@@ -151,5 +56,5 @@
                 <div>
                     <label>Price</label>
-                    <input type="number" step="0.01" name="price" th:value="${bm.price}" required/>
+                    <input type="number" step="0.01" name="price" th:value="${mode=='edit' ? bm.price : ''}" required/>
                 </div>
             </div>
@@ -158,9 +63,9 @@
                 <div>
                     <label>Dosage Form</label>
-                    <input type="text" name="dosageForm" th:value="${bm.dosageForm}" required/>
+                    <input type="text" name="dosageForm" th:value="${mode=='edit' ? bm.dosageForm : ''}" required/>
                 </div>
                 <div>
                     <label>Strength</label>
-                    <input type="text" name="strength" th:value="${bm.strength}" required/>
+                    <input type="text" name="strength" th:value="${mode=='edit' ? bm.strength : ''}" required/>
                 </div>
             </div>
@@ -169,9 +74,9 @@
                 <div>
                     <label>Origin Country</label>
-                    <input type="text" name="originCountry" th:value="${bm.originCountry}"/>
+                    <input type="text" name="originCountry" th:value="${mode=='edit' ? bm.originCountry : ''}"/>
                 </div>
                 <div>
                     <label>Name</label>
-                    <input type="text" name="name" th:value="${bm.name}" required/>
+                    <input type="text" name="name" th:value="${mode=='edit' ? bm.name : ''}" required/>
                 </div>
             </div>
@@ -180,54 +85,198 @@
                 <div>
                     <label>Description</label>
-                    <textarea name="description" th:text="${bm.description}"></textarea>
-                </div>
-                <div>
-                    <label>Append Images</label>
-                    <input type="file" name="images" multiple accept="image/*"/>
-                    <div class="hint">Newly selected images will be appended and saved on Update.</div>
-                </div>
-            </div>
+                    <textarea name="description" th:text="${mode=='edit' ? bm.description : ''}"></textarea>
+                </div>
+                <div>
+                    <label>New Images (preview only until Save)</label>
+                    <input type="file" id="newImages" name="images" multiple accept="image/*"/>
+                    <div class="hint">Choose multiple images to preview; they are saved only when Save is clicked.</div>
+                    <div id="preview" class="grid" style="margin-top:12px;"></div>
+                </div>
+            </div>
+
+            <!-- Existing images (edit mode) -->
+            <div th:if="${mode=='edit' and images != null and !images.isEmpty()}" style="margin-top:18px;">
+                <div class="grid">
+                    <div class="img-card" th:each="img : ${images}">
+                        <img class="thumb" th:src="@{${img.image}}" alt="image">
+                        <input type="hidden" name="removeImageIds" th:value="${img.id}" disabled>
+                        <div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px;">
+                            <button type="button" class="btn-remove-existing"
+                                    th:attr="data-id=${img.id}"
+                                    style="background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px 8px;cursor:pointer;">
+                                Remove
+                            </button>
+                            <label style="margin-left:8px;">
+                                <input type="radio" name="mainPick" th:value="${'existing:'+img.id}"
+                                       th:checked="${img.mainImage}">
+                                Main
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Hidden fields managed by JS (never "undefined") -->
+            <input type="hidden" id="mainExistingId" name="mainExistingId">
+            <input type="hidden" id="mainNewIndex"   name="mainNewIndex">
 
             <div class="actions">
-                <!-- Update (save fields and images, then go home) -->
-                <button class="btn btn-primary" type="submit"
-                        th:formaction="@{/branded-medicines/{id}/update(id=${bm.id})}">
-                    Update
-                </button>
-
-                <!-- Update & Exit (save fields only, exit) -->
-                <button class="btn btn-secondary" type="submit">
-                    Update & Exit
-                </button>
-
+                <button class="btn btn-primary" type="submit">Save</button>
                 <a class="btn btn-secondary" th:href="@{/}">Cancel</a>
             </div>
         </form>
     </div>
-
-    <!-- IMAGE GALLERY (outside any form to avoid nested forms) -->
-    <div class="gallery" th:if="${mode=='edit' and images != null and !images.isEmpty()}">
-        <div class="grid">
-            <div class="img-card" th:each="img : ${images}">
-                <img class="thumb" th:src="@{${img.image}}" alt="image"/>
-
-                <!-- Delete (standalone form) -->
-                <form th:action="@{/branded-medicines/{bmId}/images/{imageId}/delete(bmId=${bm.id},imageId=${img.id})}"
-                      method="post" style="position:absolute;top:6px;right:6px;">
-                    <button type="submit" class="icon-btn" title="Remove">×</button>
-                </form>
-
-                <!-- Main badge or Set as main (standalone form) -->
-                <div th:if="${img.mainImage}" class="chip">Main</div>
-                <form th:if="${!img.mainImage}"
-                      th:action="@{/branded-medicines/{bmId}/images/{imageId}/set-main(bmId=${bm.id},imageId=${img.id})}"
-                      method="post" style="margin-top:8px;text-align:center;">
-                    <button type="submit" class="small-btn">Set as main</button>
-                </form>
-            </div>
-        </div>
+</div>
+
+<script>
+    // Hidden fields for the server (avoid "undefined")
+    const mainExistingId = document.getElementById('mainExistingId');
+    const mainNewIndex   = document.getElementById('mainNewIndex');
+
+    // 1) Existing remove buttons toggle hidden remove ids
+    function wireExistingRemoveButtons() {
+        document.querySelectorAll('.btn-remove-existing').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const card = btn.closest('.img-card');
+                const hidden = card.querySelector('input[type="hidden"][name="removeImageIds"]');
+                const wasEnabled = !hidden.disabled;
+                hidden.disabled = wasEnabled ? true : false;
+                btn.textContent = wasEnabled ? 'Remove' : 'Undo';
+                btn.style.borderColor = wasEnabled ? '#e5e7eb' : '#f0caca';
+                btn.style.color = wasEnabled ? '#111' : '#b3261e';
+
+                // If this was main and now removed, clear main and pick a fallback below
+                const radio = card.querySelector('input[type="radio"][name="mainPick"]');
+                if (!hidden.disabled && radio && radio.checked) {
+                    radio.checked = false;
+                    mainExistingId.value = '';
+                    chooseFallbackMain();
+                }
+            });
+        });
+    }
+    wireExistingRemoveButtons();
+
+    // 2) One radio group across existing and new
+    document.addEventListener('change', (e) => {
+        const t = e.target;
+        if (t && t.name === 'mainPick' && t.type === 'radio') {
+            const v = String(t.value || '');
+            if (v.startsWith('existing:')) {
+                mainExistingId.value = v.split(':')[1] || '';
+                mainNewIndex.value = '';
+            } else if (v.startsWith('new:')) {
+                mainNewIndex.value = v.split(':')[1] || '';
+                mainExistingId.value = '';
+            }
+        }
+    });
+
+    // 3) Aggregate multiple selections with DataTransfer + FileReader previews
+    const fileInput = document.getElementById('newImages');
+    const preview   = document.getElementById('preview');
+    const saveForm  = document.getElementById('saveForm');
+    let aggregated  = [];
+
+    function syncInputFiles() {
+        const dt = new DataTransfer();
+        aggregated.forEach(f => dt.items.add(f));
+        fileInput.files = dt.files;
+    }
+
+    function buildPreviewCard(dataUrl, fileName, idx) {
+        const card = document.createElement('div');
+        card.className = 'img-card';
+        card.innerHTML = `
+    <img class="thumb" src="${dataUrl}" alt="${fileName}">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px;">
+      <label>
+        <input type="radio" name="mainPick" value="new:${idx}"> Main (new)
+      </label>
+      <button type="button" class="remove-new-btn" data-index="${idx}"
+              style="background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px 8px;cursor:pointer;">
+        Remove
+      </button>
     </div>
-
-</div>
+  `;
+        return card;
+    }
+
+    function renderPreview() {
+        preview.innerHTML = '';
+        aggregated.forEach((file, idx) => {
+            const reader = new FileReader();
+            reader.onload = e => {
+                const card = buildPreviewCard(e.target.result, file.name, idx);
+                preview.appendChild(card);
+                const removeBtn = card.querySelector('.remove-new-btn');
+                removeBtn.addEventListener('click', () => {
+                    const i = parseInt(removeBtn.getAttribute('data-index'), 10);
+                    if (mainNewIndex.value === String(i)) mainNewIndex.value = '';
+                    aggregated.splice(i, 1);
+                    syncInputFiles();
+                    renderPreview();
+                    if (!mainExistingId.value && !mainNewIndex.value) chooseFallbackMain();
+                });
+            };
+            reader.readAsDataURL(file);
+        });
+
+        if (!mainExistingId.value && !mainNewIndex.value && aggregated.length > 0) {
+            mainNewIndex.value = '0';
+            const first = preview.querySelector('input[type="radio"][name="mainPick"][value="new:0"]');
+            if (first) first.checked = true;
+        }
+    }
+
+    function chooseFallbackMain() {
+        const existingCards = document.querySelectorAll('.img-card input[type="hidden"][name="removeImageIds"]');
+        for (const hidden of existingCards) {
+            if (hidden.disabled) {
+                const card = hidden.closest('.img-card');
+                const r = card.querySelector('input[type="radio"][name="mainPick"][value^="existing:"]');
+                if (r) {
+                    r.checked = true;
+                    const v = r.value.split(':')[1] || '';
+                    mainExistingId.value = v;
+                    mainNewIndex.value = '';
+                    return;
+                }
+            }
+        }
+        const newRadio = preview.querySelector('input[type="radio"][name="mainPick"][value^="new:"]');
+        if (newRadio) {
+            newRadio.checked = true;
+            mainExistingId.value = '';
+            mainNewIndex.value = newRadio.value.split(':')[1] || '';
+        } else {
+            mainExistingId.value = '';
+            mainNewIndex.value = '';
+        }
+    }
+
+    fileInput?.addEventListener('change', function () {
+        const files = Array.from(this.files || []);
+        files.forEach(f => { if (/^image\//.test(f.type)) aggregated.push(f); });
+        this.value = ''; // allow re-selecting same file
+        syncInputFiles();
+        renderPreview();
+        if (!mainExistingId.value && !mainNewIndex.value) chooseFallbackMain();
+    });
+
+    (function initMainFromExisting() {
+        const checked = document.querySelector('input[type="radio"][name="mainPick"]:checked');
+        if (checked) {
+            const v = checked.value || '';
+            if (v.startsWith('existing:')) mainExistingId.value = v.split(':')[1] || '';
+            if (v.startsWith('new:'))      mainNewIndex.value   = v.split(':')[1] || '';
+        }
+    })();
+
+    saveForm?.addEventListener('submit', () => {
+        if (mainExistingId.value === 'undefined') mainExistingId.value = '';
+        if (mainNewIndex.value   === 'undefined') mainNewIndex.value   = '';
+    });
+</script>
 </body>
 </html>
Index: src/main/resources/templates/index.html
===================================================================
--- src/main/resources/templates/index.html	(revision 0316dec0ce0fab272562e850a37b7653804de51f)
+++ src/main/resources/templates/index.html	(revision 30a24d5fe31d77745e8f6a188298f13a99c1f4d4)
@@ -44,5 +44,4 @@
                     <div>
                         <form th:action="@{/branded-medicines/{id}/delete(id=${bm.id})}" method="post" style="display:inline">
-                            <!-- Add CSRF hidden input if Spring Security is active -->
                             <button type="submit" class="btn-outline" style="margin-right:8px;color:#b3261e;border-color:#f0caca">Delete</button>
                         </form>