Index: src/main/java/mk/ukim/finki/synergymed/exceptions/InvalidInputException.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/exceptions/InvalidInputException.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
+++ src/main/java/mk/ukim/finki/synergymed/exceptions/InvalidInputException.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -0,0 +1,4 @@
+package mk.ukim.finki.synergymed.exceptions;
+
+public class InvalidInputException extends RuntimeException{
+}
Index: src/main/java/mk/ukim/finki/synergymed/exceptions/MedicineAlreadyExistsException.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/exceptions/MedicineAlreadyExistsException.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
+++ src/main/java/mk/ukim/finki/synergymed/exceptions/MedicineAlreadyExistsException.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -0,0 +1,4 @@
+package mk.ukim.finki.synergymed.exceptions;
+
+public class MedicineAlreadyExistsException extends RuntimeException{
+}
Index: src/main/java/mk/ukim/finki/synergymed/exceptions/MedicineInteractionAlreadyExistsException.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/exceptions/MedicineInteractionAlreadyExistsException.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
+++ src/main/java/mk/ukim/finki/synergymed/exceptions/MedicineInteractionAlreadyExistsException.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -0,0 +1,4 @@
+package mk.ukim.finki.synergymed.exceptions;
+
+public class MedicineInteractionAlreadyExistsException extends RuntimeException{
+}
Index: src/main/java/mk/ukim/finki/synergymed/repositories/MedicineRepository.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/repositories/MedicineRepository.java	(revision 1cdd6dbf58c8a5906ac38419dd5760e3f038123e)
+++ src/main/java/mk/ukim/finki/synergymed/repositories/MedicineRepository.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -8,3 +8,5 @@
 public interface MedicineRepository extends JpaRepository<Medicine, Integer> {
     Optional<Medicine> getMedicineById(Integer id);
+    Optional<Medicine> getMedicineByMedicineName(String name);
+    boolean existsByMedicineName(String name);
 }
Index: src/main/java/mk/ukim/finki/synergymed/repositories/MedicineinteractionRepository.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/repositories/MedicineinteractionRepository.java	(revision 1cdd6dbf58c8a5906ac38419dd5760e3f038123e)
+++ src/main/java/mk/ukim/finki/synergymed/repositories/MedicineinteractionRepository.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -5,4 +5,12 @@
 import org.springframework.data.jpa.repository.JpaRepository;
 
+import java.util.List;
+import java.util.Optional;
+
 public interface MedicineinteractionRepository extends JpaRepository<Medicineinteraction, MedicineinteractionId> {
+
+    List<Medicineinteraction> findById_MedicineId1(Integer medicineId1);
+    List<Medicineinteraction> findById_MedicineId2(Integer medicineId2);
+
+    Optional<Medicineinteraction> findById_MedicineId1AndId_MedicineId2(Integer id1, Integer id2);
 }
Index: src/main/java/mk/ukim/finki/synergymed/service/MedicineService.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/service/MedicineService.java	(revision 1cdd6dbf58c8a5906ac38419dd5760e3f038123e)
+++ src/main/java/mk/ukim/finki/synergymed/service/MedicineService.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -1,10 +1,9 @@
 package mk.ukim.finki.synergymed.service;
 
-import jakarta.persistence.*;
-import lombok.Getter;
-import lombok.Setter;
+import mk.ukim.finki.synergymed.exceptions.InvalidInputException;
+import mk.ukim.finki.synergymed.exceptions.MedicineAlreadyExistsException;
 import mk.ukim.finki.synergymed.models.Medicine;
+import mk.ukim.finki.synergymed.models.Medicineinteraction;
 
-import java.io.IOException;
 import java.util.List;
 
@@ -12,4 +11,7 @@
 
     List<Medicine> findAllMedicine();
-    Medicine save(String medicineName,String activeIngredients) throws IOException;
+    Medicine findById(Integer id);
+    Medicine save(String medicineName,String activeIngredients) throws InvalidInputException, MedicineAlreadyExistsException;
+    List<Medicineinteraction> interactions(String medicineName);
+    Medicineinteraction addInteraction(Medicine medicine1, Medicine medicine2, String type, String description, String severity);
 }
Index: src/main/java/mk/ukim/finki/synergymed/service/impl/MedicineServiceImpl.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/service/impl/MedicineServiceImpl.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
+++ src/main/java/mk/ukim/finki/synergymed/service/impl/MedicineServiceImpl.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -0,0 +1,104 @@
+package mk.ukim.finki.synergymed.service.impl;
+
+import lombok.RequiredArgsConstructor;
+import mk.ukim.finki.synergymed.exceptions.InvalidInputException;
+import mk.ukim.finki.synergymed.exceptions.MedicineAlreadyExistsException;
+import mk.ukim.finki.synergymed.exceptions.MedicineDoesNotExistException;
+import mk.ukim.finki.synergymed.exceptions.MedicineInteractionAlreadyExistsException;
+import mk.ukim.finki.synergymed.models.Medicine;
+import mk.ukim.finki.synergymed.models.Medicineinteraction;
+import mk.ukim.finki.synergymed.models.MedicineinteractionId;
+import mk.ukim.finki.synergymed.repositories.MedicineRepository;
+import mk.ukim.finki.synergymed.repositories.MedicineinteractionRepository;
+import mk.ukim.finki.synergymed.service.MedicineService;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Optional;
+
+@Service
+@RequiredArgsConstructor
+public class MedicineServiceImpl implements MedicineService {
+    private final MedicineRepository medicineRepository;
+    private final MedicineinteractionRepository medicineinteractionRepository;
+    @Override
+    public List<Medicine> findAllMedicine() {
+        return medicineRepository.findAll();
+    }
+
+    @Override
+    public Medicine findById(Integer id) {
+        return medicineRepository.findById(id)
+                .orElseThrow(MedicineDoesNotExistException::new);
+    }
+
+    @Override
+    public Medicine save(String medicineName, String activeIngredients) throws InvalidInputException, MedicineAlreadyExistsException {
+        if(medicineName == null || medicineName.isEmpty() || activeIngredients == null || activeIngredients.isEmpty()){
+            throw new RuntimeException("Please enter all fields.");
+        }
+        if(medicineRepository.existsByMedicineName(medicineName)){
+            throw new MedicineDoesNotExistException();
+        }
+
+        Medicine medicine = new Medicine();
+        medicine.setMedicineName(medicineName);
+        medicine.setActiveIngredient(activeIngredients);
+
+        return medicineRepository.save(medicine);
+    }
+
+    @Override
+    public List<Medicineinteraction> interactions(String medicineName) {
+        Optional<Medicine> medicine = medicineRepository.getMedicineByMedicineName(medicineName);
+
+        if (medicine.isEmpty()) {
+            throw new MedicineDoesNotExistException();
+        }
+
+        Integer medId = medicine.get().getId();
+
+        List<Medicineinteraction> interactionsAsFirst = medicineinteractionRepository.findById_MedicineId1(medId);
+        List<Medicineinteraction> interactionsAsSecond = medicineinteractionRepository.findById_MedicineId2(medId);
+
+        List<Medicineinteraction> allInteractions = new ArrayList<>();
+        allInteractions.addAll(interactionsAsFirst);
+        allInteractions.addAll(interactionsAsSecond);
+
+        return allInteractions;
+    }
+
+    @Override
+    public Medicineinteraction addInteraction(Medicine medicine1,
+                                              Medicine medicine2,
+                                              String type,
+                                              String description,
+                                              String severity) {
+        boolean exists = medicineinteractionRepository
+                .findById_MedicineId1AndId_MedicineId2(medicine1.getId(), medicine2.getId())
+                .isPresent()
+                || medicineinteractionRepository
+                .findById_MedicineId1AndId_MedicineId2(medicine2.getId(), medicine1.getId())
+                .isPresent();
+
+        if (exists) {
+            throw new MedicineInteractionAlreadyExistsException();
+        }
+
+        MedicineinteractionId id = new MedicineinteractionId();
+        id.setMedicineId1(medicine1.getId());
+        id.setMedicineId2(medicine2.getId());
+
+        Medicineinteraction interaction = new Medicineinteraction();
+        interaction.setId(id);
+        interaction.setMedicineId1(medicine1);
+        interaction.setMedicineId2(medicine2);
+        interaction.setType(type);
+        interaction.setDescription(description);
+        interaction.setSeverity(severity);
+
+        return medicineinteractionRepository.save(interaction);
+
+    }
+}
Index: src/main/java/mk/ukim/finki/synergymed/web/MedicineInteractionController.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/web/MedicineInteractionController.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
+++ src/main/java/mk/ukim/finki/synergymed/web/MedicineInteractionController.java	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -0,0 +1,103 @@
+package mk.ukim.finki.synergymed.web;
+
+import lombok.RequiredArgsConstructor;
+import mk.ukim.finki.synergymed.models.Medicine;
+import mk.ukim.finki.synergymed.models.Medicineinteraction;
+import mk.ukim.finki.synergymed.service.MedicineService;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@Controller
+@RequestMapping("/medicine/interactions")
+@RequiredArgsConstructor
+public class MedicineInteractionController {
+
+    private final MedicineService medicineService;
+
+    @GetMapping
+    public String getInteractions(Model model){
+        List<Medicine> medicineList = medicineService.findAllMedicine();
+        model.addAttribute("medicineList", medicineList);
+
+        return "medicine-interactions";
+    }
+
+    @PostMapping("/search")
+    public String searchInteractions(@RequestParam String searchTerm,
+                                     Model model){
+
+        List<Medicine> medicineList = medicineService.findAllMedicine();
+        model.addAttribute("medicineList", medicineList);
+        try{
+            List<Medicineinteraction> interactions = medicineService.interactions(searchTerm);
+            model.addAttribute("interactions", interactions);
+
+        }catch (RuntimeException ex){
+            model.addAttribute("hasError", true);
+            model.addAttribute("error", ex.getMessage());
+        }
+        return "medicine-interactions";
+    }
+
+    @GetMapping("/{id}")
+    public String getInteractionsForMedicine(@PathVariable Integer id,
+                                             Model model){
+
+        List<Medicine> medicineList = medicineService.findAllMedicine();
+        model.addAttribute("medicineList", medicineList);
+        try{
+            Medicine medicine = medicineService.findById(id);
+            List<Medicineinteraction> interactions = medicineService.interactions(medicine.getMedicineName());
+            model.addAttribute("interactions", interactions);
+            model.addAttribute("searchedMedicine", medicine.getMedicineName());
+
+            if(interactions.isEmpty()) {
+                model.addAttribute("hasInfo", true);
+                model.addAttribute("info", "No interactions found for " + medicine.getMedicineName());
+            }
+
+        }catch (RuntimeException ex){
+            model.addAttribute("hasError", true);
+            model.addAttribute("error", ex.getMessage());
+        }
+
+        return "medicine-interactions";
+    }
+
+    @GetMapping("/add")
+    public String getAddInteractionsPage(Model model) {
+        model.addAttribute("medicineList", medicineService.findAllMedicine());
+        return "add-medicine-interaction";
+    }
+
+    @PostMapping("/add")
+    public String addInteractions(@RequestParam Integer medicine1Id,
+                                  @RequestParam Integer medicine2Id,
+                                  @RequestParam String type,
+                                  @RequestParam String severity,
+                                  @RequestParam String description,
+                                  Model model) {
+        try {
+            if (medicine1Id.equals(medicine2Id)) {
+                throw new RuntimeException("Не може да изберете ист лек два пати.");
+            }
+
+            Medicine med1 = medicineService.findById(medicine1Id);
+            Medicine med2 = medicineService.findById(medicine2Id);
+
+            medicineService.addInteraction(med1, med2, type, description, severity);
+
+            model.addAttribute("hasSuccess", true);
+            model.addAttribute("success", "Интеракцијата е успешно додадена.");
+        } catch (RuntimeException ex) {
+            model.addAttribute("hasError", true);
+            model.addAttribute("error", ex.getMessage());
+        }
+
+        model.addAttribute("medicineList", medicineService.findAllMedicine());
+        return "add-medicine-interaction";
+    }
+}
Index: src/main/resources/templates/add-medicine-interaction.html
===================================================================
--- src/main/resources/templates/add-medicine-interaction.html	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
+++ src/main/resources/templates/add-medicine-interaction.html	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynergyMed - Add Interaction</title>
+    <style>
+        * { margin:0; padding:0; box-sizing:border-box; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
+            min-height:100vh; padding:20px;
+        }
+        .container { max-width:800px; margin:0 auto; }
+
+        .header { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); margin-bottom:30px; overflow:hidden; }
+        .header-content { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:30px; text-align:center; }
+        .header-content h1 { font-size:2.2rem; font-weight:300; margin-bottom:10px; }
+        .header-content p { font-size:1rem; opacity:.9; }
+
+        .card { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); overflow:hidden; margin-bottom:30px; }
+        .card-header { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:20px 30px; font-size:1.3rem; font-weight:600; }
+        .card-body { padding:30px; }
+
+        .form-group { margin-bottom:25px; }
+        .form-control { width:100%; padding:15px 20px; border:2px solid #e1e5e9; border-radius:12px; font-size:1rem; transition:all .3s ease; background:#f8f9fa; }
+        .form-control:focus { outline:none; border-color:#20b2aa; background:white; box-shadow:0 0 0 3px rgba(32,178,170,.1); }
+
+        .btn-submit { width:100%; padding:15px; background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; border:none; border-radius:12px; font-size:1rem; font-weight:600; cursor:pointer; transition:all .3s ease; text-transform:uppercase; letter-spacing:1px; }
+        .btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(32,178,170,.3); }
+        .btn-submit:active { transform:translateY(0); }
+
+        /* Alerts */
+        .alert { padding:15px; border-radius:12px; margin-bottom:20px; font-size:.9rem; }
+        .alert-danger { background-color:#fee; color:#c33; border:1px solid #fcc; }
+        .alert-success { background-color:#efe; color:#363; border:1px solid #cfc; }
+
+        /* Severity fancy buttons */
+        .severity-options { display:flex; gap:20px; justify-content:space-between; margin-top:15px; }
+        .severity-option { flex:1; }
+        .severity-option input { display:none; }
+        .severity-label {
+            display:block;
+            padding:15px;
+            border-radius:12px;
+            text-align:center;
+            cursor:pointer;
+            font-weight:700;
+            text-transform:uppercase;
+            transition:all .3s ease;
+            border:2px solid transparent;
+            font-size:0.95rem;
+            letter-spacing:1px;
+            box-shadow:0 4px 8px rgba(0,0,0,0.08);
+        }
+
+        .severity-low    { background:linear-gradient(135deg,#d1ecf1,#b3e6f0); color:#0c5460; border-color:#0c5460; }
+        .severity-medium { background:linear-gradient(135deg,#fff3cd,#ffe082); color:#856404; border-color:#856404; }
+        .severity-high   { background:linear-gradient(135deg,#f8d7da,#f5b7b1); color:#721c24; border-color:#721c24; }
+
+        .severity-option input:checked + .severity-label {
+            transform:scale(1.07);
+            box-shadow:0 0 15px rgba(0,0,0,0.25);
+            border-width:3px;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <!-- Header -->
+    <div class="header">
+        <div class="header-content">
+            <h1>Add Interaction</h1>
+            <p>Select two different medicines and define their interaction</p>
+        </div>
+    </div>
+
+    <!-- Alerts -->
+    <div th:if="${hasError}" class="alert alert-danger">
+        <span th:text="${error}">Error message</span>
+    </div>
+    <div th:if="${hasSuccess}" class="alert alert-success">
+        <span th:text="${success}">Success message</span>
+    </div>
+
+    <!-- Add Interaction Form -->
+    <div class="card">
+        <div class="card-header">Interaction Form</div>
+        <div class="card-body">
+            <form th:action="@{/medicine/interactions/add}" method="post">
+
+                <div class="form-group">
+                    <label for="medicine1Id">First Medicine</label>
+                    <select id="medicine1Id" name="medicine1Id" class="form-control" required>
+                        <option value="">-- Select medicine --</option>
+                        <option th:each="med : ${medicineList}"
+                                th:value="${med.id}"
+                                th:text="${med.medicineName + ' (' + med.activeIngredient + ')'}">
+                        </option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="medicine2Id">Second Medicine</label>
+                    <select id="medicine2Id" name="medicine2Id" class="form-control" required>
+                        <option value="">-- Select another medicine --</option>
+                        <option th:each="med : ${medicineList}"
+                                th:value="${med.id}"
+                                th:text="${med.medicineName + ' (' + med.activeIngredient + ')'}">
+                        </option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>Severity Level</label>
+                    <div class="severity-options">
+                        <div class="severity-option">
+                            <input type="radio" id="low" name="severity" value="НИСКА" required>
+                            <label for="low" class="severity-label severity-low">LOW</label>
+                        </div>
+                        <div class="severity-option">
+                            <input type="radio" id="medium" name="severity" value="УМЕРЕНА" required>
+                            <label for="medium" class="severity-label severity-medium">MEDIUM</label>
+                        </div>
+                        <div class="severity-option">
+                            <input type="radio" id="high" name="severity" value="ВИСОКА" required>
+                            <label for="high" class="severity-label severity-high">HIGH</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="type">Interaction Type</label>
+                    <input type="text" id="type" name="type" class="form-control" placeholder="Pharmacological, Clinical..." required>
+                </div>
+
+                <div class="form-group">
+                    <label for="description">Description</label>
+                    <textarea id="description" name="description" class="form-control" rows="4"
+                              placeholder="Enter detailed explanation for the interaction..."></textarea>
+                </div>
+
+                <button type="submit" class="btn-submit">Add Interaction</button>
+            </form>
+        </div>
+    </div>
+</div>
+</body>
+</html>
Index: src/main/resources/templates/medicine-interactions.html
===================================================================
--- src/main/resources/templates/medicine-interactions.html	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
+++ src/main/resources/templates/medicine-interactions.html	(revision fa9c17a3dab93ba9cd525f7deb850d6af995b3fb)
@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynergyMed - Medicine Interactions</title>
+    <style>
+        * { margin:0; padding:0; box-sizing:border-box; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
+            min-height:100vh; padding:20px;
+        }
+        .container { max-width:1000px; margin:0 auto; }
+
+        .header { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); margin-bottom:30px; overflow:hidden; }
+        .header-content { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:30px; text-align:center; }
+        .header-content h1 { font-size:2.5rem; font-weight:300; margin-bottom:10px; }
+        .header-content p { font-size:1.1rem; opacity:.9; }
+
+        .nav-bar { background:white; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,.1); margin-bottom:30px; padding:20px 30px; }
+        .nav-links { display:flex; gap:20px; align-items:center; }
+        .nav-link { color:#20b2aa; text-decoration:none; padding:10px 20px; border-radius:25px; transition:all .3s ease; font-weight:500; }
+        .nav-link:hover, .nav-link.active { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; }
+        .back-btn { margin-left:auto; background:linear-gradient(135deg,#6c757d,#495057); color:white; }
+
+        .card { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); overflow:hidden; margin-bottom:30px; }
+        .card-header { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:25px 30px; font-size:1.3rem; font-weight:600; }
+        .card-body { padding:30px; }
+
+        .form-group { margin-bottom:25px; }
+        .form-control { width:100%; padding:15px 20px; border:2px solid #e1e5e9; border-radius:12px; font-size:1rem; transition:all .3s ease; background:#f8f9fa; }
+        .form-control:focus { outline:none; border-color:#20b2aa; background:white; box-shadow:0 0 0 3px rgba(32,178,170,.1); }
+
+        .btn-submit { padding:15px 30px; background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; border:none; border-radius:12px; font-size:1rem; font-weight:600; cursor:pointer; transition:all .3s ease; text-transform:uppercase; letter-spacing:1px; }
+        .btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(32,178,170,.3); }
+        .btn-submit:active { transform:translateY(0); }
+
+        .search-form { display:flex; gap:15px; align-items:flex-end; }
+        .search-input { flex:1; }
+
+        .medicine-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
+        .medicine-card { background:white; border-radius:15px; padding:20px; border:2px solid #e1e5e9; transition:all .3s ease; }
+        .medicine-card:hover { transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,0.1); border-color:#20b2aa; }
+
+        .medicine-name { font-weight:600; color:#333; margin-bottom:8px; font-size:1.2rem; }
+        .medicine-ingredient { color:#666; font-size:0.9rem; margin-bottom:15px; font-style:italic; }
+        .check-interactions-btn { width:100%; padding:12px; background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; border:none; border-radius:10px; font-weight:600; cursor:pointer; transition:all .3s ease; text-decoration:none; display:block; text-align:center; }
+        .check-interactions-btn:hover { color:white; transform:translateY(-2px); box-shadow:0 8px 20px rgba(32,178,170,.3); }
+
+        .interaction-item { background:#f8f9fa; border-radius:15px; padding:20px; margin-bottom:15px; border-left:4px solid #20b2aa; position:relative; }
+        .interaction-medicines { font-weight:600; color:#333; margin-bottom:8px; font-size:1.1rem; }
+        .interaction-type { color:#20b2aa; font-weight:600; margin-bottom:8px; font-size:0.9rem; text-transform:uppercase; }
+        .interaction-description { color:#666; font-size:0.9rem; line-height:1.5; }
+
+        .severity-badge { position:absolute; top:15px; right:15px; padding:4px 12px; border-radius:15px; font-size:.8rem; font-weight:600; text-transform:uppercase; }
+        .severity-badge.high { background:#fee; color:#c33; }
+        .severity-badge.medium { background:#fff3cd; color:#856404; }
+        .severity-badge.low { background:#d1ecf1; color:#0c5460; }
+
+        .severity-high { border-left-color:#c33; }
+        .severity-medium { border-left-color:#856404; }
+        .severity-low { border-left-color:#0c5460; }
+
+        .alert { padding:15px; border-radius:12px; margin-bottom:20px; font-size:.9rem; }
+        .alert-danger { background-color:#fee; color:#c33; border:1px solid #fcc; }
+        .alert-success { background-color:#efe; color:#363; border:1px solid #cfc; }
+        .alert-info { background-color:#d1ecf1; color:#0c5460; border:1px solid #b6d4da; }
+
+        .no-interactions { text-align:center; color:#888; font-style:italic; padding:40px 20px; }
+        .no-interactions i { font-size:3rem; margin-bottom:15px; opacity:0.5; }
+
+        .current-results { background:#f8f9fa; border-radius:15px; padding:20px; margin-bottom:20px; }
+        .current-results h3 { color:#333; margin-bottom:15px; font-size:1.1rem; }
+
+        @media (max-width:768px) {
+            .medicine-grid { grid-template-columns:1fr; }
+            .search-form { flex-direction:column; }
+            .search-input { margin-bottom:15px; }
+            .header-content h1 { font-size:2rem; }
+            .nav-links { flex-wrap:wrap; }
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <!-- Header -->
+    <div class="header">
+        <div class="header-content">
+            <h1>Medicine Interactions</h1>
+            <p>Check for potential drug interactions to ensure safe medication combinations</p>
+        </div>
+    </div>
+
+    <!-- Navigation -->
+    <div class="nav-bar">
+        <div class="nav-links">
+            <a href="#" class="nav-link">Medicine</a>
+            <a href="#" class="nav-link active">Interactions</a>
+            <a href="#" class="nav-link back-btn">Back to Dashboard</a>
+        </div>
+    </div>
+
+    <!-- Alert Messages -->
+    <div th:if="${hasError}" class="alert alert-danger">
+        <span th:text="${error}">Error message</span>
+    </div>
+
+    <div th:if="${hasInfo}" class="alert alert-info">
+        <span th:text="${info}">Info message</span>
+    </div>
+
+    <!-- Search Section -->
+    <div class="card">
+        <div class="card-header">Search for Medicine Interactions</div>
+        <div class="card-body">
+            <form th:action="@{/medicine/interactions/search}" method="post" class="search-form">
+                <div class="form-group search-input">
+                    <input type="text"
+                           class="form-control"
+                           name="searchTerm"
+                           placeholder="Enter medicine name to check interactions..."
+                           th:value="${searchedMedicine != null ? searchedMedicine : ''}">
+                </div>
+                <button type="submit" class="btn-submit">Search Interactions</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Interaction Results -->
+    <div th:if="${interactions != null}" class="card">
+        <div class="card-header">
+            Interaction Results
+            <span th:if="${searchedMedicine != null and !searchedMedicine.isEmpty()}"
+                  style="font-weight:400; opacity:0.9;">
+                for <strong th:text="${searchedMedicine}"></strong>
+            </span>
+        </div>
+        <div class="card-body">
+            <div th:if="${interactions.isEmpty()}" class="no-interactions">
+                <i>✓</i>
+                <h4>No Interactions Found</h4>
+                <p>This medicine appears to have no recorded interactions with other medicines in our database.</p>
+            </div>
+
+            <div th:if="${!interactions.isEmpty()}">
+                <div th:each="interaction : ${interactions}"
+                     class="interaction-item"
+                     th:classappend="${interaction.severity.toLowerCase() == 'high'} ? 'severity-high' :
+                                        (${interaction.severity.toLowerCase() == 'medium'} ? 'severity-medium' : 'severity-low')">
+
+                        <span class="severity-badge"
+                              th:classappend="${interaction.severity.toLowerCase() == 'high'} ? 'high' :
+                                             (${interaction.severity.toLowerCase() == 'medium'} ? 'medium' : 'low')"
+                              th:text="${interaction.severity}">Severity</span>
+
+                    <div class="interaction-medicines">
+                        <span th:text="${interaction.medicineId1.medicineName}">Medicine 1</span>
+                        <span style="color:#888; font-weight:400;"> ↔ </span>
+                        <span th:text="${interaction.medicineId2.medicineName}">Medicine 2</span>
+                    </div>
+
+                    <div class="interaction-type" th:text="${interaction.type}">Interaction Type</div>
+
+                    <div class="interaction-description"
+                         th:if="${interaction.description != null and !interaction.description.isEmpty()}"
+                         th:text="${interaction.description}">Description</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- All Medicines -->
+    <div class="card">
+        <div class="card-header">All Available Medicines</div>
+        <div class="card-body">
+            <div th:if="${medicineList != null and !medicineList.isEmpty()}" class="medicine-grid">
+                <div th:each="medicine : ${medicineList}" class="medicine-card">
+                    <div class="medicine-name" th:text="${medicine.medicineName}">Medicine Name</div>
+                    <div class="medicine-ingredient" th:text="${medicine.activeIngredient}">Active Ingredient</div>
+                    <a th:href="@{/medicine/interactions/{id}(id=${medicine.id})}"
+                       class="check-interactions-btn">Check Interactions</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<script>
+    // Add loading state to search form
+    document.querySelector('form').addEventListener('submit', function() {
+        const btn = this.querySelector('.btn-submit');
+        btn.textContent = 'Searching...';
+        btn.disabled = true;
+    });
+
+    // Add subtle animations
+    document.addEventListener('DOMContentLoaded', function() {
+        const cards = document.querySelectorAll('.medicine-card');
+        cards.forEach((card, index) => {
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(20px)';
+            setTimeout(() => {
+                card.style.transition = 'all 0.5s ease';
+                card.style.opacity = '1';
+                card.style.transform = 'translateY(0)';
+            }, index * 100);
+        });
+    });
+</script>
+</body>
+</html>