Index: src/main/java/mk/ukim/finki/synergymed/web/BrandedMedicineController.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/web/BrandedMedicineController.java	(revision ed4e8e48a4cd7eef74beade22940e01c51d96b35)
+++ src/main/java/mk/ukim/finki/synergymed/web/BrandedMedicineController.java	(revision 5682fcc7325dacdef9e86e386fc009ff59120c4a)
@@ -17,5 +17,5 @@
 
 @Controller
-@RequestMapping("/")
+@RequestMapping({"/","branded-medicines"})
 public class BrandedMedicineController {
 
Index: src/main/resources/templates/branded-medicine-form.html
===================================================================
--- src/main/resources/templates/branded-medicine-form.html	(revision ed4e8e48a4cd7eef74beade22940e01c51d96b35)
+++ src/main/resources/templates/branded-medicine-form.html	(revision 5682fcc7325dacdef9e86e386fc009ff59120c4a)
@@ -30,4 +30,5 @@
 </head>
 <body>
+<div th:replace="fragments/header :: siteHeader"></div>
 <div class="wrap">
     <div class="head">
Index: src/main/resources/templates/companies.html
===================================================================
--- src/main/resources/templates/companies.html	(revision ed4e8e48a4cd7eef74beade22940e01c51d96b35)
+++ src/main/resources/templates/companies.html	(revision 5682fcc7325dacdef9e86e386fc009ff59120c4a)
@@ -5,9 +5,30 @@
     <title>SynergyMed – Companies</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- 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;--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}
-        body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);color:var(--text);padding:28px;display:flex;justify-content:center}
-        .page{width:100%;max-width:1200px}
+
+        /* Stack header above centered content; remove body padding so header can touch edges */
+        body{
+            font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
+            min-height:100vh;
+            background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);
+            color:var(--text);
+            display:flex; flex-direction:column; align-items:center;
+        }
+
+        /* Full-width header overrides */
+        .site-header{
+            position: sticky; top:0; left:0; right:0; width:100%;
+            border-radius:0; margin:0; z-index:1000;
+        }
+
+        /* Centered page wrapper now holds the padding */
+        .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}
@@ -23,8 +44,12 @@
         .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){body{padding:16px}.header{padding:16px}}
+        @media (max-width:560px){.page{padding:16px}.header{padding:16px}}
     </style>
 </head>
 <body>
+
+<!-- Full-width global header OUTSIDE the .page container -->
+<th:block th:replace="fragments/header :: siteHeader('companies', ${username})"></th:block>
+
 <div class="page">
     <div class="header">
@@ -56,4 +81,7 @@
     </div>
 </div>
+
+<!-- Header dropdown script -->
+<th:block th:replace="fragments/header :: headerScripts"></th:block>
 </body>
 </html>
Index: src/main/resources/templates/fragments/header.html
===================================================================
--- src/main/resources/templates/fragments/header.html	(revision 5682fcc7325dacdef9e86e386fc009ff59120c4a)
+++ src/main/resources/templates/fragments/header.html	(revision 5682fcc7325dacdef9e86e386fc009ff59120c4a)
@@ -0,0 +1,188 @@
+<!-- templates/fragments/header.html -->
+
+<!-- Head styles fragment -->
+<th:block th:fragment="headerStyles">
+    <style>
+        :root{
+            /* Light neutral palette */
+            --teal-1:#ffffff;      /* white */
+            --teal-2:#ece8df;      /* soft beige-gray */
+            --text:#1f2937;        /* dark gray text */
+            --muted:#4b5563;       /* medium gray text */
+            --shadow:0 20px 40px rgba(0,0,0,0.10);
+            --shadow-sm:0 6px 18px rgba(0,0,0,0.08);
+        }
+
+        /* Header container */
+        .site-header{
+            position: sticky; top: 20px; z-index: 50;
+            display:flex; align-items:center; justify-content:space-between; gap:16px;
+            padding:14px 18px;
+            background: linear-gradient(135deg, var(--teal-1), var(--teal-2)); /* white → beige-gray */
+            color: var(--text);                         /* darker text for contrast */
+            border-radius:20px; box-shadow: var(--shadow);
+        }
+
+        /* Brand/logo */
+        .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
+        .logo{height:36px; width:auto; display:block; border-radius:10px}
+        .brand-name{font-weight:700; letter-spacing:.3px}
+
+        /* Primary nav */
+        .main-nav{display:flex; gap:10px; align-items:center}
+        .nav-btn{
+            display:inline-flex; align-items:center; gap:8px;
+            padding:10px 14px; border-radius:12px;
+            color:#111827;                                  /* dark text */
+            text-decoration:none; font-weight:600;
+            background: rgba(0,0,0,.06);                    /* subtle neutral chip */
+            border:1px solid rgba(0,0,0,.10);
+            transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
+        }
+        .nav-btn:hover{
+            transform: translateY(-1px);
+            background: rgba(0,0,0,.10);
+            border-color: rgba(0,0,0,.14);
+        }
+        .nav-btn.active{
+            box-shadow: 0 8px 18px rgba(0,0,0,.10);
+            background: rgba(0,0,0,.12);
+            border-color: rgba(0,0,0,.16);
+        }
+
+        /* Account area */
+        .account{margin-left:auto; display:flex; align-items:center}
+
+        /* Neutral login button to match light header */
+        .login-btn{
+            display:inline-flex; align-items:center; padding:10px 14px; border-radius:12px;
+            color:#111827; background:#ffffff;
+            text-decoration:none; font-weight:700;
+            border:1px solid rgba(0,0,0,.14);
+            box-shadow: 0 1px 2px rgba(0,0,0,.04);
+            transition:.15s ease;
+        }
+        .login-btn:hover{
+            border-color: rgba(0,0,0,.22);
+            background:#f3f4f6;
+            box-shadow: 0 6px 14px rgba(0,0,0,.10);
+        }
+
+        /* User menu button + dropdown */
+        .user-menu{position:relative}
+        .user-button{
+            display:flex; align-items:center; gap:8px;
+            padding:8px 10px; border-radius:14px; cursor:pointer;
+            background: rgba(0,0,0,.06);
+            border:1px solid rgba(0,0,0,.10);
+            color:#111827; font-weight:600;
+            transition: .15s ease;
+        }
+        .user-button:hover{
+            background: rgba(0,0,0,.10);
+            border-color: rgba(0,0,0,.14);
+        }
+        .user-button:focus-visible{outline:3px solid rgba(0,0,0,.25); outline-offset:2px}
+
+        .avatar{
+            width:28px; height:28px; border-radius:50%;
+            display:grid; place-items:center; font-weight:800; font-size:.9rem;
+            background:#e5e7eb; color:#111827;                 /* light chip, dark letter */
+        }
+        .user-name{max-width:160px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
+        .chev{opacity:.85}
+
+        .dropdown{
+            position:absolute; right:0; top: calc(100% + 10px); min-width:220px;
+            background:#ffffff; color: var(--text); border-radius:14px; box-shadow: var(--shadow-sm);
+            padding:8px; pointer-events:none; opacity:0; transform: translateY(-6px);
+            transition: opacity .12s ease, transform .12s ease;
+            border:1px solid rgba(0,0,0,.06);
+        }
+        .user-menu.open .dropdown{pointer-events:auto; opacity:1; transform: translateY(0)}
+        .dropdown-item{
+            display:flex; align-items:center; justify-content:space-between;
+            width:100%; text-decoration:none; background:transparent; border:none; cursor:pointer;
+            color: var(--text); padding:10px 12px; border-radius:10px; font-weight:600;
+        }
+        .dropdown-item:hover{background:#f3f4f6}
+        .dropdown-item.danger{color:#b3261e}
+        .dropdown-item.danger:hover{background:#fdecec}
+
+        /* Responsive tweaks */
+        @media (max-width: 780px){
+            .site-header{flex-wrap:wrap; row-gap:10px}
+            .main-nav{order:3; width:100%; justify-content:center}
+            .account{margin-left:0; margin-right:0}
+            .user-name{display:none}
+        }
+    </style>
+</th:block>
+
+<!-- Body header fragment (parameterized) -->
+<th:block th:fragment="siteHeader(activePage, username)">
+    <header class="site-header">
+        <a class="brand" th:href="@{/}">
+            <img src="/logo.png" alt="SynergyMed logo" class="logo">
+        </a>
+
+        <nav class="main-nav" aria-label="Primary">
+            <a class="nav-btn" th:href="@{/branded-medicines}"
+               th:classappend="${activePage}=='medicines' ? ' active'">Medicine</a>
+            <a class="nav-btn" th:href="@{/companies}"
+               th:classappend="${activePage}=='companies' ? ' active'">Companies</a>
+        </nav>
+
+        <div class="account">
+            <div class="user-menu" th:if="${username}">
+                <button class="user-button" id="userButton" type="button"
+                        aria-haspopup="true" aria-expanded="false" aria-controls="userDropdown">
+                    <span class="avatar" th:text="${#strings.substring(username,0,1).toUpperCase()}">U</span>
+                    <span class="user-name" th:text="${username}">username</span>
+                    <svg class="chev" width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
+                        <path fill="currentColor" d="M7 10l5 5 5-5z"/>
+                    </svg>
+                </button>
+                <div class="dropdown" id="userDropdown" role="menu" aria-labelledby="userButton">
+                    <a class="dropdown-item" th:href="@{/profile}" role="menuitem">Profile settings</a>
+                    <form th:action="@{/logout}" method="post" style="margin:0">
+                        <input type="hidden" th:name="${_csrf?.parameterName}" th:value="${_csrf?.token}">
+                        <button type="submit" class="dropdown-item danger" role="menuitem">Logout</button>
+                    </form>
+                </div>
+            </div>
+
+            <a class="login-btn" th:unless="${username}" th:href="@{/login}">Log in</a>
+        </div>
+    </header>
+</th:block>
+
+<!-- Footer scripts fragment -->
+<th:block th:fragment="headerScripts">
+    <script>
+        (function(){
+            const menu = document.querySelector('.user-menu');
+            if(!menu) return;
+            const btn = menu.querySelector('#userButton');
+
+            function closeMenu(){
+                menu.classList.remove('open');
+                btn && btn.setAttribute('aria-expanded','false');
+            }
+            function openMenu(){
+                menu.classList.add('open');
+                btn && btn.setAttribute('aria-expanded','true');
+            }
+            btn && btn.addEventListener('click', (e)=>{
+                e.stopPropagation();
+                menu.classList.contains('open') ? closeMenu() : openMenu();
+            });
+            document.addEventListener('click', (e)=>{
+                if(!menu.contains(e.target)) closeMenu();
+            });
+            document.addEventListener('keydown', (e)=>{
+                if(e.key === 'Escape') closeMenu();
+            });
+        })();
+    </script>
+</th:block>
Index: src/main/resources/templates/index.html
===================================================================
--- src/main/resources/templates/index.html	(revision ed4e8e48a4cd7eef74beade22940e01c51d96b35)
+++ src/main/resources/templates/index.html	(revision 5682fcc7325dacdef9e86e386fc009ff59120c4a)
@@ -5,13 +5,66 @@
     <title>SynergyMed – Branded Medicines</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Header styles (fragment from templates/fragments/header.html) -->
+    <th:block th:replace="fragments/header :: headerStyles"></th:block>
+
+    <!-- Page styles -->
     <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}
-        body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);color:var(--text);padding:28px;display:flex;justify-content:center}
-        .page{width:100%;max-width:1200px}
-        .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}
+
+        /* Make the header edge-to-edge at the very top, and stack content under it */
+        body{
+            font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
+            min-height:100vh;
+            background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);
+            color:var(--text);
+            display:flex;
+            flex-direction:column;   /* stack header and page vertically */
+            align-items:center;      /* center the .page container */
+            /* no body padding so header touches the edges */
+        }
+
+        /* Centered content container with interior padding (replacing old body padding) */
+        .page{
+            width:100%;
+            max-width:1200px;
+            padding:28px;           /* replaces previous body padding */
+            margin:0 auto;
+        }
+
+        /* Force the global site header to be full-width, square corners, top-attached */
+        .site-header{
+            position: sticky;       /* stays attached while scrolling */
+            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 */
+        }
+
+        /* Optional: space between global header and the page section header */
+        .after-site-header{ height: 16px; }
+
+        /* Page section header (title + create button) */
+        .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)}
         .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}
@@ -24,8 +77,20 @@
         .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){body{padding:16px}.header{padding:16px}}
+
+        @media (max-width:560px){
+            .page{padding:16px}
+            .header{padding:16px}
+        }
     </style>
 </head>
 <body>
+
+<!-- Full-width, top-attached global header -->
+<th:block th:replace="fragments/header :: siteHeader('medicines', ${username})"></th:block>
+
+<!-- small spacer below the global header (optional) -->
+<div class="after-site-header" aria-hidden="true"></div>
+
+<!-- Centered page content -->
 <div class="page">
     <div class="header">
@@ -53,4 +118,7 @@
     </div>
 </div>
+
+<!-- Header dropdown script -->
+<th:block th:replace="fragments/header :: headerScripts"></th:block>
 </body>
 </html>
Index: src/main/resources/templates/profile.html
===================================================================
--- src/main/resources/templates/profile.html	(revision ed4e8e48a4cd7eef74beade22940e01c51d96b35)
+++ src/main/resources/templates/profile.html	(revision 5682fcc7325dacdef9e86e386fc009ff59120c4a)
@@ -5,21 +5,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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;
-        }
-
+        * { 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;
-            padding: 20px;
-        }
-
+            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 */
         .container {
             max-width: 1200px;
             margin: 0 auto;
+            padding: 20px; /* moved from body */
         }
 
@@ -45,6 +57,5 @@
             height: 120px;
             border-radius: 50%;
-            /* TODO: Replace with actual profile picture */
-            background: #888;
+            background: #888; /* TODO: Replace with actual profile picture */
             display: flex;
             align-items: center;
@@ -131,12 +142,7 @@
         }
 
-        .card-body {
-            padding: 30px;
-        }
-
-        .info-grid {
-            display: grid;
-            gap: 20px;
-        }
+        .card-body { padding: 30px; }
+
+        .info-grid { display: grid; gap: 20px; }
 
         .info-item {
@@ -148,18 +154,8 @@
         }
 
-        .info-item:last-child {
-            border-bottom: none;
-        }
-
-        .info-label {
-            font-weight: 600;
-            color: #555;
-            font-size: 0.95rem;
-        }
-
-        .info-value {
-            color: #333;
-            font-size: 1rem;
-        }
+        .info-item:last-child { border-bottom: none; }
+
+        .info-label { font-weight: 600; color: #555; font-size: 0.95rem; }
+        .info-value { color: #333; font-size: 1rem; }
 
         .blood-type {
@@ -187,9 +183,5 @@
         }
 
-        .medicine-name {
-            font-weight: 600;
-            color: #333;
-            font-size: 1.1rem;
-        }
+        .medicine-name { font-weight: 600; color: #333; font-size: 1.1rem; }
 
         .severity {
@@ -200,31 +192,10 @@
             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;
-        }
+        .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 {
@@ -233,10 +204,5 @@
             color: #888;
         }
-
-        .no-data-icon {
-            font-size: 4rem;
-            margin-bottom: 20px;
-            opacity: 0.3;
-        }
+        .no-data-icon { font-size: 4rem; margin-bottom: 20px; opacity: 0.3; }
 
         .logout-btn {
@@ -250,5 +216,4 @@
             font-weight: 500;
         }
-
         .logout-btn:hover {
             transform: translateY(-2px);
@@ -257,37 +222,19 @@
 
         @media (max-width: 768px) {
-            .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;
-            }
+            .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>
 </head>
 <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>
+
 <div class="container">
     <!-- Profile Header -->
@@ -334,7 +281,5 @@
         <!-- Personal Information Card -->
         <div class="card">
-            <div class="card-header">
-                Personal Information
-            </div>
+            <div class="card-header">Personal Information</div>
             <div class="card-body">
                 <div class="info-grid">
@@ -369,7 +314,5 @@
         <!-- Health Profile Card -->
         <div class="card">
-            <div class="card-header">
-                Health Profile
-            </div>
+            <div class="card-header">Health Profile</div>
             <div class="card-body">
                 <div th:if="${hasHealthProfile}">
@@ -416,4 +359,7 @@
     </div>
 </div>
+
+<!-- Shared header dropdown script -->
+<th:block th:replace="fragments/header :: headerScripts"></th:block>
 </body>
 </html>
