Index: src/main/java/mk/ukim/finki/synergymed/service/MedicineService.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/service/MedicineService.java	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/java/mk/ukim/finki/synergymed/service/MedicineService.java	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -1,6 +1,4 @@
 package mk.ukim.finki.synergymed.service;
 
-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;
@@ -15,7 +13,6 @@
     Medicine save(String medicineName,String activeIngredients);
 
-    List<Medicine> findAllMedicine();
-    Medicine findById(Integer id);
-    Medicine save(String medicineName,String activeIngredients) throws InvalidInputException, MedicineAlreadyExistsException;
+//    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 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/java/mk/ukim/finki/synergymed/service/impl/MedicineServiceImpl.java	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -2,6 +2,4 @@
 
 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;
@@ -16,10 +14,5 @@
 import java.util.ArrayList;
 import jakarta.persistence.EntityNotFoundException;
-import mk.ukim.finki.synergymed.models.Medicine;
-import mk.ukim.finki.synergymed.repositories.MedicineRepository;
-import mk.ukim.finki.synergymed.service.MedicineService;
-import org.springframework.stereotype.Service;
 
-import java.io.IOException;
 import java.util.List;
 import java.util.Optional;
@@ -28,92 +21,8 @@
 @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);
-
-    }
-public class MedicineServiceImpl implements MedicineService {
-
-    private final MedicineRepository medicineRepository;
-
-    public MedicineServiceImpl(MedicineRepository medicineRepository) {
-        this.medicineRepository = medicineRepository;
-    }
 
     @Override
@@ -151,3 +60,55 @@
     }
 
+    @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);
+    }
+
+    @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;
+    }
+
 }
Index: src/main/java/mk/ukim/finki/synergymed/web/MedicineInteractionController.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/web/MedicineInteractionController.java	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/java/mk/ukim/finki/synergymed/web/MedicineInteractionController.java	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -10,4 +10,5 @@
 
 import java.util.List;
+import java.util.Optional;
 
 @Controller
@@ -19,6 +20,6 @@
 
     @GetMapping
-    public String getInteractions(Model model){
-        List<Medicine> medicineList = medicineService.findAllMedicine();
+    public String getInteractions(Model model) {
+        List<Medicine> medicineList = medicineService.findAll();
         model.addAttribute("medicineList", medicineList);
 
@@ -28,13 +29,13 @@
     @PostMapping("/search")
     public String searchInteractions(@RequestParam String searchTerm,
-                                     Model model){
+                                     Model model) {
 
-        List<Medicine> medicineList = medicineService.findAllMedicine();
+        List<Medicine> medicineList = medicineService.findAll();
         model.addAttribute("medicineList", medicineList);
-        try{
+        try {
             List<Medicineinteraction> interactions = medicineService.interactions(searchTerm);
             model.addAttribute("interactions", interactions);
 
-        }catch (RuntimeException ex){
+        } catch (RuntimeException ex) {
             model.addAttribute("hasError", true);
             model.addAttribute("error", ex.getMessage());
@@ -45,20 +46,25 @@
     @GetMapping("/{id}")
     public String getInteractionsForMedicine(@PathVariable Integer id,
-                                             Model model){
+                                             Model model) {
 
-        List<Medicine> medicineList = medicineService.findAllMedicine();
+        List<Medicine> medicineList = medicineService.findAll();
         model.addAttribute("medicineList", medicineList);
-        try{
-            Medicine medicine = medicineService.findById(id);
+        try {
+            Optional<Medicine> optMedicine = medicineService.findById(id);
+            if (optMedicine.isEmpty()) {
+                throw new RuntimeException("Medicine not found");
+            }
+
+            Medicine medicine = optMedicine.get();
             List<Medicineinteraction> interactions = medicineService.interactions(medicine.getMedicineName());
             model.addAttribute("interactions", interactions);
             model.addAttribute("searchedMedicine", medicine.getMedicineName());
 
-            if(interactions.isEmpty()) {
+            if (interactions.isEmpty()) {
                 model.addAttribute("hasInfo", true);
                 model.addAttribute("info", "No interactions found for " + medicine.getMedicineName());
             }
 
-        }catch (RuntimeException ex){
+        } catch (RuntimeException ex) {
             model.addAttribute("hasError", true);
             model.addAttribute("error", ex.getMessage());
@@ -70,5 +76,5 @@
     @GetMapping("/add")
     public String getAddInteractionsPage(Model model) {
-        model.addAttribute("medicineList", medicineService.findAllMedicine());
+        model.addAttribute("medicineList", medicineService.findAll());
         return "add-medicine-interaction";
     }
@@ -83,14 +89,18 @@
         try {
             if (medicine1Id.equals(medicine2Id)) {
-                throw new RuntimeException("Не може да изберете ист лек два пати.");
+                throw new RuntimeException("You cannot select the same medicine twice.");
             }
 
-            Medicine med1 = medicineService.findById(medicine1Id);
-            Medicine med2 = medicineService.findById(medicine2Id);
+            Optional<Medicine> med1 = medicineService.findById(medicine1Id);
+            Optional<Medicine> med2 = medicineService.findById(medicine2Id);
 
-            medicineService.addInteraction(med1, med2, type, description, severity);
+            if (med1.isEmpty() || med2.isEmpty()) {
+                throw new RuntimeException("The selected medicine does not exist.");
+            }
+
+            medicineService.addInteraction(med1.get(), med2.get(), type, description, severity);
 
             model.addAttribute("hasSuccess", true);
-            model.addAttribute("success", "Интеракцијата е успешно додадена.");
+            model.addAttribute("success", "Interaction successfully added.");
         } catch (RuntimeException ex) {
             model.addAttribute("hasError", true);
@@ -98,5 +108,5 @@
         }
 
-        model.addAttribute("medicineList", medicineService.findAllMedicine());
+        model.addAttribute("medicineList", medicineService.findAll());
         return "add-medicine-interaction";
     }
Index: src/main/resources/application.properties
===================================================================
--- src/main/resources/application.properties	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/application.properties	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -2,7 +2,7 @@
 
 # Database connection
-spring.datasource.url=jdbc:postgresql://localhost:5432/SynergyMed
+spring.datasource.url=jdbc:postgresql://localhost:5432/synergymed
 spring.datasource.username=postgres
-spring.datasource.password=1234
+spring.datasource.password=postgres
 spring.jpa.properties.hibernate.default_schema=synergymed
 spring.datasource.driver-class-name=org.postgresql.Driver
Index: src/main/resources/templates/add-medicine-interaction.html
===================================================================
--- src/main/resources/templates/add-medicine-interaction.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/add-medicine-interaction.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -5,4 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SynergyMed - Add Interaction</title>
+
+    <!-- Header styles -->
+    <th:block th:replace="fragments/header :: headerStyles"></th:block>
+
     <style>
         * { margin:0; padding:0; box-sizing:border-box; }
@@ -10,7 +14,22 @@
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
-            min-height:100vh; padding:20px;
+            min-height:100vh;
         }
-        .container { max-width:800px; margin:0 auto; }
+
+        /* Full-width global header - FIXED STYLING */
+        .site-header {
+            position:sticky;
+            top:0;
+            left:0;
+            right:0;
+            width:100%;
+            border-radius:0;
+            margin:0;
+            z-index:1000;
+            background:white !important; /* Force white background */
+            box-shadow:0 2px 10px rgba(0,0,0,0.1); /* Add subtle shadow */
+        }
+
+        .container { max-width:800px; margin:0 auto; padding:20px; }
 
         .header { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); margin-bottom:30px; overflow:hidden; }
@@ -67,4 +86,8 @@
 </head>
 <body>
+
+<!-- Global header -->
+<th:block th:replace="fragments/header :: siteHeader(${null}, ${username})"></th:block>
+
 <div class="container">
     <!-- Header -->
@@ -146,4 +169,7 @@
     </div>
 </div>
+
+<!-- Dropdown script -->
+<th:block th:replace="fragments/header :: headerScripts"></th:block>
 </body>
 </html>
Index: src/main/resources/templates/companies.html
===================================================================
--- src/main/resources/templates/companies.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/companies.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -10,8 +10,13 @@
 
     <style>
-        :root{--teal-1:#20b2aa;--teal-2:#48d1cc;--bg:#fefeff;--card:#ffffff;--muted:#6c757d;--text:#1f2937;--shadow:0 20px 40px rgba(0,0,0,0.10);--shadow-sm:0 6px 18px rgba(0,0,0,0.08)}
+        :root {
+            --teal-1:#20b2aa; --teal-2:#48d1cc;
+            --bg:#fefeff; --card:#ffffff;
+            --muted:#6c757d; --text:#1f2937;
+            --shadow:0 20px 40px rgba(0,0,0,0.10);
+            --shadow-sm:0 6px 18px rgba(0,0,0,0.08);
+        }
         *{margin:0;padding:0;box-sizing:border-box}
 
-        /* Stack header above centered content; remove body padding so header can touch edges */
         body{
             font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
@@ -19,61 +24,127 @@
             background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);
             color:var(--text);
-            display:flex; flex-direction:column; align-items:center;
         }
 
-        /* Full-width header overrides */
+        /* Full-width global header - FIXED STYLING */
         .site-header{
-            position: sticky; top:0; left:0; right:0; width:100%;
-            border-radius:0; margin:0; z-index:1000;
+            position:sticky;
+            top:0;
+            left:0;
+            right:0;
+            width:100%;
+            border-radius:0;
+            margin:0;
+            z-index:1000;
+            background:white !important; /* Force white background */
+            box-shadow:0 2px 10px rgba(0,0,0,0.1); /* Add subtle shadow */
         }
 
-        /* Centered page wrapper now holds the padding */
-        .page{width:100%;max-width:1200px; padding:28px; margin:0 auto}
+        .page{width:100%; max-width:1200px; padding:28px; margin:0 auto}
 
-        .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;background:linear-gradient(135deg,var(--teal-1),var(--teal-2));color:#fff;padding:20px 24px;border-radius:20px;box-shadow:var(--shadow)}
-        .btn{display:inline-block;border:none;cursor:pointer;text-decoration:none;padding:12px 16px;border-radius:12px;font-weight:600;letter-spacing:.5px;transition:.2s ease}
-        .btn-primary{background:linear-gradient(135deg,var(--teal-1),var(--teal-2));color:#fff;box-shadow:0 10px 20px rgba(32,178,170,.25)}
+        /* Card wrapper */
+        .card{
+            background:var(--card);
+            border-radius:18px;
+            box-shadow:var(--shadow);
+            margin-bottom:28px;
+            overflow:hidden;
+        }
+
+        .card-header{
+            background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
+            color:#fff;
+            padding:20px 24px;
+            display:flex; justify-content:space-between; align-items:center;
+            font-size:1.3rem; font-weight:600;
+        }
+
+        .card-body{padding:22px}
+
+        .btn{
+            display:inline-block; border:none; cursor:pointer; text-decoration:none;
+            padding:12px 16px; border-radius:12px; font-weight:600;
+            letter-spacing:.5px; transition:.2s ease;
+        }
+        .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-primary:hover{transform:translateY(-2px)}
-        .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
-        .card{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
-        .content{padding:14px 16px 18px}
+
+        .grid{
+            display:grid;
+            grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
+            gap:22px;
+        }
+        .company-card{
+            background:var(--card);
+            border-radius:18px;
+            box-shadow:var(--shadow-sm);
+            overflow:hidden;
+            display:flex; flex-direction:column;
+        }
+        .content{padding:16px 18px}
         .title{font-weight:700;margin:6px 0 2px}
         .muted{color:var(--muted);font-size:.92rem}
-        .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
-        .badge{display:inline-block;background:rgba(32,178,170,.12);color:#137a74;padding:4px 8px;border-radius:999px;font-size:.80rem;font-weight:700;margin-right:6px}
-        .btn-outline{background:#fff;border:2px solid rgba(32,178,170,.25);color:#20b2aa;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;transition:.2s ease}
+        .badge{
+            display:inline-block;
+            background:rgba(32,178,170,.12);
+            color:#137a74;
+            padding:4px 8px;
+            border-radius:999px;
+            font-size:.80rem;
+            font-weight:700;
+            margin-right:6px;
+        }
+        .btn-outline{
+            background:#fff;
+            border:2px solid rgba(32,178,170,.25);
+            color:#20b2aa;
+            padding:8px 12px;
+            border-radius:10px;
+            text-decoration:none;
+            font-weight:600;
+            transition:.2s ease;
+        }
         .btn-outline:hover{border-color:#20b2aa;box-shadow:0 6px 14px rgba(32,178,170,.18)}
-        @media (max-width:560px){.page{padding:16px}.header{padding:16px}}
+
+        .row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
+        @media (max-width:560px){.page{padding:16px}}
     </style>
 </head>
 <body>
 
-<!-- Full-width global header OUTSIDE the .page container -->
+<!-- Global header -->
 <th:block th:replace="fragments/header :: siteHeader('companies', ${username})"></th:block>
 
 <div class="page">
-    <div class="header">
-        <h2>Companies</h2>
-        <a class="btn btn-primary" th:href="@{/companies/new}">Create</a>
-    </div>
+    <!-- Companies card -->
+    <div class="card">
+        <div class="card-header">
+            <span>Companies</span>
+            <a class="btn btn-primary" th:href="@{/companies/new}">Create</a>
+        </div>
+        <div class="card-body">
+            <div class="grid">
+                <div class="company-card" th:each="c : ${companies}">
+                    <div class="content">
+                        <div class="title" th:text="${c.companyName}">Company Name</div>
+                        <div class="muted" th:text="${'Reg. No: ' + c.registrationNumber}">Reg No</div>
+                        <div class="muted" th:text="${c.description}">Description</div>
 
-    <div class="grid">
-        <div class="card" th:each="c : ${companies}">
-            <div class="content">
-                <div class="title" th:text="${c.companyName}">Company Name</div>
-                <div class="muted" th:text="${'Reg. No: ' + c.registrationNumber}">Reg No</div>
-                <div class="muted" th:text="${c.description}">Description</div>
+                        <div style="margin-top:8px;">
+                            <span class="badge" th:each="r : ${rolesByCompany[c.id]}" th:text="${r}">ROLE</span>
+                        </div>
 
-                <div style="margin-top:8px;">
-                    <span class="badge" th:each="r : ${rolesByCompany[c.id]}" th:text="${r}">ROLE</span>
-                </div>
-
-                <div class="row" style="margin-top:12px;">
-                    <div>
-                        <a class="btn-outline" th:href="@{/companies/{id}/edit(id=${c.id})}" style="margin-right:8px;">Edit</a>
+                        <div class="row">
+                            <div>
+                                <a class="btn-outline" th:href="@{/companies/{id}/edit(id=${c.id})}" style="margin-right:8px;">Edit</a>
+                            </div>
+                            <form th:action="@{/companies/{id}/delete(id=${c.id})}" method="post" style="display:inline">
+                                <button type="submit" class="btn-outline" style="color:#b3261e;border-color:#f0caca">Delete</button>
+                            </form>
+                        </div>
                     </div>
-                    <form th:action="@{/companies/{id}/delete(id=${c.id})}" method="post" style="display:inline">
-                        <button type="submit" class="btn-outline" style="color:#b3261e;border-color:#f0caca">Delete</button>
-                    </form>
                 </div>
             </div>
@@ -82,5 +153,5 @@
 </div>
 
-<!-- Header dropdown script -->
+<!-- Dropdown script -->
 <th:block th:replace="fragments/header :: headerScripts"></th:block>
 </body>
Index: src/main/resources/templates/company-form.html
===================================================================
--- src/main/resources/templates/company-form.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/company-form.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -5,76 +5,150 @@
     <title th:text="${mode=='create' ? 'Create Company' : 'Edit Company'}">Company</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Shared global header styles -->
+    <th:block th:replace="fragments/header :: headerStyles"></th:block>
+
     <style>
-        :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:center;justify-content:center;background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);padding:24px}
-        .wrap{width:100%;max-width:720px;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,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,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}
-        .roles{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
-        .chip{display:inline-flex;align-items:center;gap:6px;border:2px solid rgba(32,178,170,.25);border-radius:999px;padding:8px 12px;background:#fff}
-        .actions{display:flex;gap:12px;padding:0 24px 24px 24px}
-        .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)}
+        :root {
+            --teal-1:#20b2aa;
+            --teal-2:#48d1cc;
+            --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;
+            background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);
+        }
+
+        .content-wrapper {
+            padding:24px;
+        }
+
+        /* Full-width global header - FIXED STYLING */
+        .site-header {
+            position:sticky;
+            top:0;
+            left:0;
+            right:0;
+            width:100%;
+            border-radius:0;
+            margin:0;
+            z-index:1000;
+            background:white !important; /* Force white background */
+            box-shadow:0 2px 10px rgba(0,0,0,0.1); /* Add subtle shadow */
+        }
+
+        .wrap {
+            width:100%;
+            max-width:720px;
+            margin:40px auto;
+            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,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,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; }
+        .roles { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
+        .chip {
+            display:inline-flex; align-items:center; gap:6px;
+            border:2px solid rgba(32,178,170,.25);
+            border-radius:999px;
+            padding:8px 12px;
+            background:#fff;
+        }
+        .actions { display:flex; gap:12px; padding:0 24px 24px 24px; }
+        .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);
+        }
     </style>
 </head>
 <body>
-<div class="wrap">
-    <div class="head">
-        <h2 th:text="${mode=='create' ? 'Create Company' : 'Edit Company'}">Company</h2>
+
+<!-- Global sticky header (white, full width) -->
+<th:block th:replace="fragments/header :: siteHeader(${null}, ${username})"></th:block>
+
+<div class="content-wrapper">
+    <div class="wrap">
+        <div class="head">
+            <h2 th:text="${mode=='create' ? 'Create Company' : 'Edit Company'}">Company</h2>
+        </div>
+
+        <div class="body">
+            <form th:action="${mode=='create'} ? @{/companies} : @{/companies/{id}/update(id=${company.id})}" method="post">
+
+                <div class="row">
+                    <div>
+                        <label>Company Name</label>
+                        <input type="text" name="companyName" th:value="${mode=='edit' ? company.companyName : ''}" required>
+                    </div>
+                    <div>
+                        <label>Registration Number</label>
+                        <input type="text" name="registrationNumber" th:value="${mode=='edit' ? company.registrationNumber : ''}" required>
+                    </div>
+                </div>
+
+                <div class="row-1">
+                    <div>
+                        <label>Description</label>
+                        <textarea name="description" th:text="${mode=='edit' ? company.description : ''}"></textarea>
+                    </div>
+                </div>
+
+                <div class="row-1">
+                    <div>
+                        <label>Company Types</label>
+                        <div class="roles">
+                            <label class="chip" th:each="rt : ${roleTypes}">
+                                <input type="checkbox" name="roles" th:value="${rt}"
+                                       th:checked="${mode=='edit' and selectedRoles != null and selectedRoles.contains(rt)}">
+                                <span th:text="${rt}">ROLE</span>
+                            </label>
+                        </div>
+                        <div class="hint">Select roles; on update, existing roles are pre-checked based on current state.</div>
+                    </div>
+                </div>
+
+                <div class="actions">
+                    <button class="btn btn-primary" type="submit" th:text="${mode=='create' ? 'Create' : 'Update'}">Save</button>
+                    <a class="btn btn-secondary" th:href="@{/companies}">Cancel</a>
+                </div>
+            </form>
+        </div>
     </div>
 
-    <div class="body">
-        <form th:action="${mode=='create'} ? @{/companies} : @{/companies/{id}/update(id=${company.id})}" method="post">
-            <!-- If Spring Security is enabled, include a CSRF token input here -->
-
-            <div class="row">
-                <div>
-                    <label>Company Name</label>
-                    <input type="text" name="companyName" th:value="${mode=='edit' ? company.companyName : ''}" required>
-                </div>
-                <div>
-                    <label>Registration Number</label>
-                    <input type="text" name="registrationNumber" th:value="${mode=='edit' ? company.registrationNumber : ''}" required>
-                </div>
-            </div>
-
-            <div class="row-1">
-                <div>
-                    <label>Description</label>
-                    <textarea name="description" th:text="${mode=='edit' ? company.description : ''}"></textarea>
-                </div>
-            </div>
-
-            <!-- Roles on both create and edit; edit pre-checks via selectedRoles -->
-            <div class="row-1">
-                <div>
-                    <label>Company Types</label>
-                    <div class="roles">
-                        <label class="chip" th:each="rt : ${roleTypes}">
-                            <input type="checkbox" name="roles" th:value="${rt}"
-                                   th:checked="${mode=='edit' and selectedRoles != null and selectedRoles.contains(rt)}">
-                            <span th:text="${rt}">ROLE</span>
-                        </label>
-                    </div>
-                    <div class="hint">Select roles; on update, existing roles are pre-checked based on current state.</div>
-                </div>
-            </div>
-
-            <div class="actions">
-                <button class="btn btn-primary" type="submit" th:text="${mode=='create' ? 'Create' : 'Update'}">Save</button>
-                <a class="btn btn-secondary" th:href="@{/companies}">Cancel</a>
-            </div>
-        </form>
-    </div>
-</div>
+    <!-- Scripts for dropdown etc. -->
+    <th:block th:replace="fragments/header :: headerScripts"></th:block>
 </body>
 </html>
Index: src/main/resources/templates/create-health-profile.html
===================================================================
--- src/main/resources/templates/create-health-profile.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/create-health-profile.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -5,4 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SynergyMed - Admin: Create Health Profile</title>
+
+    <!-- Shared header styles -->
+    <th:block th:replace="fragments/header :: headerStyles"></th:block>
+
     <style>
         * { margin:0; padding:0; box-sizing:border-box; }
@@ -11,7 +15,12 @@
             background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
             min-height: 100vh;
-            padding: 20px;
-        }
-        .container { max-width: 1200px; margin:0 auto; }
+        }
+        .site-header {
+            position: sticky; top:0; left:0; right:0;
+            width: 100%;
+            border-radius: 0;
+            z-index: 1000;
+        }
+        .container { max-width: 1200px; margin:0 auto; padding:20px; }
         .header {
             background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1);
@@ -34,5 +43,5 @@
             margin-bottom:30px; padding:20px 30px;
         }
-        .nav-links { display:flex; gap:20px; align-items:center; }
+        .nav-links { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
         .nav-link {
             color:#20b2aa; text-decoration:none;
@@ -127,4 +136,8 @@
 </head>
 <body>
+
+<!-- Full-width global header -->
+<th:block th:replace="fragments/header :: siteHeader(${null}, ${username})"></th:block>
+
 <div class="container">
     <!-- Header -->
@@ -213,4 +226,7 @@
 </div>
 
+<!-- Shared header dropdown script -->
+<th:block th:replace="fragments/header :: headerScripts"></th:block>
+
 <script>
     let selectedClientId=null;
Index: src/main/resources/templates/index.html
===================================================================
--- src/main/resources/templates/index.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/index.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -41,12 +41,14 @@
         /* Force the global site header to be full-width, square corners, top-attached */
         .site-header{
-            position: sticky;       /* stays attached while scrolling */
+            position: sticky;
             top:0;
             left:0;
             right:0;
             width:100%;
-            border-radius:0;        /* remove rounded corners */
-            margin:0;               /* no outer gap */
-            z-index:1000;           /* keep above content */
+            border-radius:0;
+            margin:0;
+            z-index:1000;
+            background:white !important; /* Force white background */
+            box-shadow:0 2px 10px rgba(0,0,0,0.1); /* Add subtle shadow */
         }
 
@@ -106,5 +108,5 @@
                 <div class="muted" th:text="${bm.dosageForm}">Dosage Form</div>
                 <div class="row">
-                    <div class="price" th:text="${'$' + #numbers.formatDecimal(bm.price, 1, 'COMMA', 2, 'POINT')}">$0.00</div>
+                    <div class="price" th:text="${#numbers.formatDecimal(bm.price, 1, 'COMMA', 2, 'POINT') + ' ден.'}">0.00 ден.</div>
                     <div>
                         <form th:action="@{/branded-medicines/{id}/delete(id=${bm.id})}" method="post" style="display:inline">
Index: src/main/resources/templates/manage-allergies.html
===================================================================
--- src/main/resources/templates/manage-allergies.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/manage-allergies.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -5,4 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SynergyMed - Manage Allergies</title>
+
+  <!-- Shared header styles -->
+  <th:block th:replace="fragments/header :: headerStyles"></th:block>
+
   <style>
     * { margin:0; padding:0; box-sizing:border-box; }
@@ -10,19 +14,31 @@
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
-      min-height:100vh; padding:20px;
+      min-height:100vh;
     }
-    .container { max-width:800px; margin:0 auto; }
+
+    .site-header {
+      position: sticky; top:0; left:0; right:0;
+      width: 100%;
+      border-radius: 0;
+      z-index: 1000;
+    }
+
+    .container { max-width:1200px; margin:0 auto; padding:20px; }
+
     .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-links { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
     .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-group label { display:block; margin-bottom:8px; color:#555; font-weight:500; font-size:.9rem; }
@@ -31,4 +47,5 @@
     select.form-control { cursor:pointer; }
     textarea.form-control { resize:vertical; min-height:100px; }
+
     .severity-options { display:flex; gap:15px; margin-top:10px; }
     .severity-option { flex:1; }
@@ -38,12 +55,13 @@
     .severity-option input[type="radio"]:checked + .severity-label.medium { background:#fff3cd; border-color:#856404; color:#856404; }
     .severity-option input[type="radio"]:checked + .severity-label.high { background:#fee; border-color:#c33; color:#c33; }
-    .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 { 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:.3s; 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); }
+
     .alert { padding:15px; border-radius:8px; 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; }
-    .current-allergies { background:#f8f9fa; border-radius:15px; padding:20px; margin-bottom:20px; }
-    .current-allergies h3 { color:#333; margin-bottom:15px; font-size:1.1rem; }
+
     .allergy-item { background:white; border-radius:10px; padding:15px; margin-bottom:10px; border-left:4px solid #20b2aa; display:flex; justify-content:space-between; align-items:center; }
     .allergy-info { flex:1; }
@@ -54,9 +72,19 @@
     .severity-badge.medium { background:#fff3cd; color:#856404; }
     .severity-badge.low { background:#d1ecf1; color:#0c5460; }
+
     .no-allergies { text-align:center; color:#888; font-style:italic; }
-    @media (max-width:768px){ .severity-options{flex-direction:column;} .nav-links{flex-wrap:wrap;} .allergy-item{flex-direction:column; align-items:flex-start; gap:10px;} }
+
+    @media (max-width:768px){
+      .severity-options{flex-direction:column;}
+      .nav-links{flex-wrap:wrap;}
+      .allergy-item{flex-direction:column; align-items:flex-start; gap:10px;}
+    }
   </style>
 </head>
 <body>
+
+<!-- Full-width global header -->
+<th:block th:replace="fragments/header :: siteHeader(${null}, ${username})"></th:block>
+
 <div class="container">
   <!-- Header -->
@@ -157,4 +185,6 @@
 </div>
 
+<th:block th:replace="fragments/header :: headerScripts"></th:block>
+
 <script>
   document.getElementById('allergyForm').addEventListener('submit', function() {
Index: src/main/resources/templates/medicine-interactions.html
===================================================================
--- src/main/resources/templates/medicine-interactions.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/medicine-interactions.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -5,4 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SynergyMed - Medicine Interactions</title>
+
+    <!-- Header styles -->
+    <th:block th:replace="fragments/header :: headerStyles"></th:block>
+
     <style>
         * { margin:0; padding:0; box-sizing:border-box; }
@@ -10,7 +14,22 @@
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
-            min-height:100vh; padding:20px;
+            min-height:100vh;
         }
-        .container { max-width:1000px; margin:0 auto; }
+
+        /* Full-width global header - FIXED STYLING */
+        .site-header {
+            position:sticky;
+            top:0;
+            left:0;
+            right:0;
+            width:100%;
+            border-radius:0;
+            margin:0;
+            z-index:1000;
+            background:white !important; /* Force white background */
+            box-shadow:0 2px 10px rgba(0,0,0,0.1); /* Add subtle shadow */
+        }
+
+        .container { max-width:1000px; margin:0 auto; padding:20px; }
 
         .header { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); margin-bottom:30px; overflow:hidden; }
@@ -84,4 +103,8 @@
 </head>
 <body>
+
+<!-- Global header -->
+<th:block th:replace="fragments/header :: siteHeader(${null}, ${username})"></th:block>
+
 <div class="container">
     <!-- Header -->
@@ -187,4 +210,7 @@
 
 </div>
+
+<!-- Dropdown script -->
+<th:block th:replace="fragments/header :: headerScripts"></th:block>
 
 <script>
Index: src/main/resources/templates/profile.html
===================================================================
--- src/main/resources/templates/profile.html	(revision 7be83a29a6442ece1edbd4cee2f6ffadb39e8a3c)
+++ src/main/resources/templates/profile.html	(revision a6008b0dfce5c36ab5a8d18125330e3a372f0ef5)
@@ -6,32 +6,26 @@
     <title>SynergyMed - Profile</title>
 
-    <!-- Shared header styles -->
     <th:block th:replace="fragments/header :: headerStyles"></th:block>
 
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        /* Stack header above centered content; remove body padding so header can touch edges */
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
             min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            /* no body padding so the full-width header reaches the edges */
-        }
-
-        /* Make the global header full-width, square corners, and stick to the very top */
+        }
+
         .site-header {
-            position: sticky; top: 0; left: 0; right: 0; width: 100%;
-            border-radius: 0; margin: 0; z-index: 1000;
-        }
-
-        /* Centered page container now holds the side padding */
+            position: sticky; top: 0; left: 0; right: 0;
+            width: 100%;
+            border-radius: 0;
+            z-index: 1000;
+        }
+
+        /* container same size as admin example */
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 20px; /* moved from body */
+            padding: 20px;
         }
 
@@ -39,5 +33,5 @@
             background: white;
             border-radius: 20px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
             margin-bottom: 30px;
             overflow: hidden;
@@ -54,178 +48,67 @@
 
         .profile-picture {
-            width: 120px;
-            height: 120px;
-            border-radius: 50%;
-            background: #888; /* TODO: Replace with actual profile picture */
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 48px;
-            font-weight: bold;
-            color: white;
-            flex-shrink: 0;
-            border: 4px solid rgba(255, 255, 255, 0.3);
-        }
-
-        .profile-info h1 {
-            font-size: 2.5rem;
-            font-weight: 300;
-            margin-bottom: 10px;
-        }
-
-        .profile-info p {
-            font-size: 1.1rem;
-            opacity: 0.9;
-            margin-bottom: 5px;
-        }
-
-        .profile-meta {
-            display: flex;
-            gap: 30px;
-            margin-top: 15px;
-        }
-
-        .meta-item {
-            background: rgba(255, 255, 255, 0.2);
-            padding: 10px 20px;
-            border-radius: 25px;
-            font-size: 0.9rem;
-        }
+            width: 120px; height: 120px; border-radius: 50%;
+            background: #888; display: flex; align-items: center; justify-content: center;
+            font-size: 48px; font-weight: bold; color: white;
+            border: 4px solid rgba(255,255,255,.3);
+        }
+
+        .profile-info h1 { font-size: 2.5rem; font-weight: 300; margin-bottom: 10px; }
+        .profile-info p { font-size: 1.1rem; opacity: .9; margin-bottom: 5px; }
+
+        .profile-meta { display: flex; gap: 30px; margin-top: 15px; flex-wrap: wrap; }
+        .meta-item { background: rgba(255,255,255,.2); padding: 8px 16px; border-radius: 20px; font-size: .9rem; }
 
         .nav-bar {
-            background: white;
-            border-radius: 15px;
-            box-shadow: 0 5px 15px rgba(0, 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 0.3s ease;
-            font-weight: 500;
-        }
-
-        .nav-link:hover, .nav-link.active {
-            background: linear-gradient(135deg, #20b2aa, #48d1cc);
-            color: white;
-        }
-
-        .main-content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-        }
+            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; flex-wrap: wrap; }
+        .nav-link { color:#20b2aa; text-decoration:none; padding:10px 20px; border-radius:25px; transition:.3s; font-weight:500; }
+        .nav-link:hover, .nav-link.active { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; }
+
+        .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
 
         .card {
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            background: white; border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,.1);
             overflow: hidden;
         }
-
-        .card-header {
-            background: linear-gradient(135deg, #20b2aa, #48d1cc);
-            color: white;
-            padding: 25px 30px;
-            font-size: 1.3rem;
-            font-weight: 600;
-        }
-
+        .card-header { background: linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:25px 30px; font-size:1.3rem; font-weight:600; }
         .card-body { padding: 30px; }
 
         .info-grid { display: grid; gap: 20px; }
-
-        .info-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 0;
-            border-bottom: 1px solid #f0f0f0;
-        }
-
+        .info-item { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
         .info-item:last-child { border-bottom: none; }
 
-        .info-label { font-weight: 600; color: #555; font-size: 0.95rem; }
+        .info-label { font-weight: 600; color: #555; font-size: .95rem; }
         .info-value { color: #333; font-size: 1rem; }
 
-        .blood-type {
-            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
-            color: white;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-weight: bold;
-            font-size: 0.9rem;
-        }
-
-        .allergy-item {
-            background: #f8f9fa;
-            border-radius: 15px;
-            padding: 20px;
-            margin-bottom: 15px;
-            border-left: 4px solid #20b2aa;
-        }
-
-        .allergy-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-
-        .medicine-name { font-weight: 600; color: #333; font-size: 1.1rem; }
-
-        .severity {
-            padding: 3px 12px;
-            border-radius: 15px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-        .severity.high { background: #fee; color: #c33; }
-        .severity.medium { background: #fff3cd; color: #856404; }
-        .severity.low { background: #d1ecf1; color: #0c5460; }
-
-        .allergy-details { color: #666; font-size: 0.9rem; margin-top: 10px; }
-        .date-diagnosed { color: #888; font-size: 0.85rem; margin-top: 8px; }
-
-        .no-data {
-            text-align: center;
-            padding: 40px;
-            color: #888;
-        }
-        .no-data-icon { font-size: 4rem; margin-bottom: 20px; opacity: 0.3; }
+        .blood-type { background: linear-gradient(135deg,#ff6b6b,#ee5a24); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; }
+
+        .allergy-item { background:#f8f9fa; border-radius:15px; padding:20px; margin-bottom:15px; border-left:4px solid #20b2aa; }
+        .allergy-header { display:flex; justify-content:space-between; margin-bottom:10px; }
+        .medicine-name { font-weight:600; }
+
+        .severity { padding:3px 12px; border-radius:15px; font-size:.8rem; font-weight:600; text-transform:uppercase; }
+        .severity.high { background:#fee; color:#c33; }
+        .severity.medium { background:#fff3cd; color:#856404; }
+        .severity.low { background:#d1ecf1; color:#0c5460; }
+
+        .allergy-details { color:#666; font-size:.9rem; margin-top:10px; }
+        .date-diagnosed { color:#888; font-size:.85rem; margin-top:8px; }
+
+        .no-data { text-align: center; padding: 40px; color: #888; }
+        .no-data-icon { font-size: 4rem; margin-bottom: 20px; opacity: .3; }
 
         .logout-btn {
-            margin-left: auto;
-            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
-            color: white;
-            padding: 10px 20px;
-            border-radius: 25px;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-weight: 500;
-        }
-        .logout-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(238, 90, 36, 0.4);
-        }
-
-        @media (max-width: 768px) {
+            margin-left:auto; background:linear-gradient(135deg,#ff6b6b,#ee5a24);
+            color:white; padding:10px 20px; border-radius:25px; text-decoration:none; font-weight:500; transition:.3s;
+        }
+        .logout-btn:hover { transform:translateY(-2px); box-shadow:0 5px 15px rgba(238,90,36,.4); }
+
+        @media(max-width: 992px) {
             .main-content { grid-template-columns: 1fr; }
-            .header-content { flex-direction: column; text-align: center; gap: 20px; }
-            .profile-meta { flex-direction: column; gap: 10px; align-items: center; }
-            .nav-links { flex-wrap: wrap; }
-            .profile-picture { width: 100px; height: 100px; font-size: 40px; }
-            .profile-info h1 { font-size: 2rem; }
         }
     </style>
@@ -233,6 +116,4 @@
 <body>
 
-<!-- Full-width global header OUTSIDE the container -->
-<!-- Pass null as activePage so no nav item is highlighted on the Profile page -->
 <th:block th:replace="fragments/header :: siteHeader(${null}, ${username})"></th:block>
 
@@ -242,5 +123,4 @@
         <div class="header-content">
             <div class="profile-picture">
-                <!-- TODO: Replace with actual profile picture -->
                 <span th:text="${user.firstName.substring(0,1).toUpperCase() + user.lastName.substring(0,1).toUpperCase()}">AB</span>
             </div>
@@ -270,88 +150,44 @@
     <!-- Main Content -->
     <div class="main-content">
-        <!-- Success/Error Messages -->
-        <div th:if="${success}" class="alert alert-success" style="grid-column: 1 / -1; margin-bottom: 20px;">
-            <span th:text="${success}">Success message</span>
-        </div>
-
-        <div th:if="${error}" class="alert alert-danger" style="grid-column: 1 / -1; margin-bottom: 20px;">
-            <span th:text="${error}">Error message</span>
-        </div>
-
-        <!-- Personal Information Card -->
+        <!-- Personal Info -->
         <div class="card">
             <div class="card-header">Personal Information</div>
             <div class="card-body">
                 <div class="info-grid">
-                    <div class="info-item">
-                        <span class="info-label">Full Name</span>
-                        <span class="info-value" th:text="${user.firstName + ' ' + user.lastName}">John Doe</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Username</span>
-                        <span class="info-value" th:text="${username}">johndoe</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Email</span>
-                        <span class="info-value" th:text="${user.email}">john.doe@email.com</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Date of Birth</span>
-                        <span class="info-value" th:text="${#temporals.format(user.dateOfBirth, 'dd MMM yyyy')}">15 Jan 1990</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Gender</span>
-                        <span class="info-value" th:text="${user.gender ?: 'Not specified'}">Male</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Member Since</span>
-                        <span class="info-value" th:text="${#temporals.format(user.dateCreated, 'dd MMM yyyy')}">01 Jan 2024</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Health Profile Card -->
+                    <div class="info-item"><span class="info-label">Full Name</span><span class="info-value" th:text="${user.firstName + ' ' + user.lastName}">John Doe</span></div>
+                    <div class="info-item"><span class="info-label">Username</span><span class="info-value" th:text="${username}">johndoe</span></div>
+                    <div class="info-item"><span class="info-label">Email</span><span class="info-value" th:text="${user.email}">john@email.com</span></div>
+                    <div class="info-item"><span class="info-label">Date of Birth</span><span class="info-value" th:text="${#temporals.format(user.dateOfBirth, 'dd MMM yyyy')}">15 Jan 1990</span></div>
+                    <div class="info-item"><span class="info-label">Gender</span><span class="info-value" th:text="${user.gender ?: 'Not specified'}">Male</span></div>
+                    <div class="info-item"><span class="info-label">Member Since</span><span class="info-value" th:text="${#temporals.format(user.dateCreated, 'dd MMM yyyy')}">01 Jan 2024</span></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Health Profile -->
         <div class="card">
             <div class="card-header">Health Profile</div>
             <div class="card-body">
                 <div th:if="${hasHealthProfile}">
-                    <div class="info-item">
-                        <span class="info-label">Blood Type</span>
-                        <span class="blood-type" th:text="${healthProfile.bloodType}">O+</span>
-                    </div>
-
+                    <div class="info-item"><span class="info-label">Blood Type</span><span class="blood-type" th:text="${healthProfile.bloodType}">O+</span></div>
                     <div style="margin-top: 30px;">
-                        <h3 style="color: #333; margin-bottom: 20px; font-size: 1.2rem;">Allergic Reactions</h3>
-
+                        <h3 style="color:#333; margin-bottom:20px;">Allergic Reactions</h3>
                         <div th:if="${healthProfile.allergicReactions != null and not #lists.isEmpty(healthProfile.allergicReactions)}">
                             <div th:each="allergy : ${healthProfile.allergicReactions}" class="allergy-item">
                                 <div class="allergy-header">
                                     <span class="medicine-name" th:text="${allergy.medicine.medicineName}">Aspirin</span>
-                                    <span class="severity"
-                                          th:class="'severity ' + ${#strings.toLowerCase(allergy.severity)}"
-                                          th:text="${allergy.severity}">HIGH</span>
+                                    <span class="severity" th:class="'severity ' + ${#strings.toLowerCase(allergy.severity)}" th:text="${allergy.severity}">HIGH</span>
                                 </div>
-                                <div class="allergy-details" th:text="${allergy.description}">
-                                    Causes severe skin reactions and difficulty breathing
-                                </div>
-                                <div class="date-diagnosed">
-                                    Diagnosed: <span th:text="${#temporals.format(allergy.dateDiagnosed, 'dd MMM yyyy')}">15 Jan 2023</span>
-                                </div>
+                                <div class="allergy-details" th:text="${allergy.description}">Details here</div>
+                                <div class="date-diagnosed">Diagnosed: <span th:text="${#temporals.format(allergy.dateDiagnosed, 'dd MMM yyyy')}">15 Jan 2023</span></div>
                             </div>
                         </div>
-
                         <div th:unless="${healthProfile.allergicReactions != null and not #lists.isEmpty(healthProfile.allergicReactions)}" class="no-data">
-                            <div class="no-data-icon">🏥</div>
-                            <p>No allergic reactions recorded</p>
-                            <small>Your medical history appears clean!</small>
+                            <div class="no-data-icon">🏥</div><p>No allergic reactions recorded</p>
                         </div>
                     </div>
                 </div>
-
                 <div th:unless="${hasHealthProfile}" class="no-data">
-                    <div class="no-data-icon">📋</div>
-                    <p>No health profile found</p>
-                    <small>Contact your healthcare provider to create a health profile.</small>
+                    <div class="no-data-icon">📋</div><p>No health profile found</p>
                 </div>
             </div>
@@ -360,5 +196,4 @@
 </div>
 
-<!-- Shared header dropdown script -->
 <th:block th:replace="fragments/header :: headerScripts"></th:block>
 </body>