Index: interfejs/admin.html
===================================================================
--- interfejs/admin.html	(revision 4dff800e0e61b01aeb1b15846b32fb42aed69027)
+++ interfejs/admin.html	(revision 79fff4f76fca5f42403a3ec1f9b04e1e66fd372d)
@@ -18,4 +18,6 @@
       <li><a href="products.html">Products</a></li>
       <li><a href="#" id="dashboard-link" class="active">Admin</a></li>
+      <li><a href="change-password.html" class="change-password-btn">🔑 Change Password</a></li>
+      <li><a href="#" id="logout-link">Logout</a></li>
     </ul>
   </nav>
@@ -201,4 +203,5 @@
   document.addEventListener('DOMContentLoaded', async () => {
     const user = await loadUserData();
+
     if (!user || user.userType !== 'admin') {
       window.location.href = 'index.html';
@@ -207,4 +210,10 @@
 
     document.getElementById('admin-name').textContent = user.username || 'Administrator';
+
+    // Logout functionality
+    document.getElementById('logout-link').addEventListener('click', async (e) => {
+      e.preventDefault();
+      await logout();
+    });
 
     // Tab switching
@@ -213,4 +222,5 @@
         document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
         document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
         btn.classList.add('active');
         document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active');
@@ -271,16 +281,17 @@
 
       const tbody = document.getElementById('users-list');
+
       if (data.success && data.users.length > 0) {
         tbody.innerHTML = data.users.map(user => `
-                        <tr>
-                            <td>${user.id || user.client_id || 'N/A'}</td>
-                            <td>${user.firstName || user.first_name || user.username || 'N/A'} ${user.lastName || user.last_name || ''}</td>
-                            <td>${user.email || 'N/A'}</td>
-                            <td><span class="status-badge status-${user.user_type || user.userType || 'unknown'}">${user.user_type || user.userType || 'unknown'}</span></td>
-                            <td>
-                                <button class="btn-small" onclick="viewUser('${user.id || user.client_id}')">View</button>
-                            </td>
-                        </tr>
-                    `).join('');
+                    <tr>
+                        <td>${user.id || user.client_id || 'N/A'}</td>
+                        <td>${user.firstName || user.first_name || user.username || 'N/A'} ${user.lastName || user.last_name || ''}</td>
+                        <td>${user.email || 'N/A'}</td>
+                        <td><span class="status-badge status-${user.user_type || user.userType || 'unknown'}">${user.user_type || user.userType || 'unknown'}</span></td>
+                        <td>
+                            <button class="btn-small" onclick="viewUser('${user.id || user.client_id}')">View</button>
+                        </td>
+                    </tr>
+                `).join('');
       } else {
         tbody.innerHTML = '<tr><td colspan="5">No users found</td></tr>';
@@ -298,16 +309,17 @@
 
       const tbody = document.getElementById('stores-list');
+
       if (data.success && data.stores.length > 0) {
         tbody.innerHTML = data.stores.map(store => `
-                        <tr>
-                            <td>${store.store_id}</td>
-                            <td>${store.name}</td>
-                            <td>${store.store_email}</td>
-                            <td>${store.rating || '0.0'}</td>
-                            <td>
-                                <button class="btn-small" onclick="viewStore('${store.store_id}')">View</button>
-                            </td>
-                        </tr>
-                    `).join('');
+                    <tr>
+                        <td>${store.store_id}</td>
+                        <td>${store.name}</td>
+                        <td>${store.store_email}</td>
+                        <td>${store.rating || '0.0'}</td>
+                        <td>
+                            <button class="btn-small" onclick="viewStore('${store.store_id}')">View</button>
+                        </td>
+                    </tr>
+                `).join('');
       } else {
         tbody.innerHTML = '<tr><td colspan="5">No stores found</td></tr>';
@@ -325,15 +337,16 @@
 
       const tbody = document.getElementById('orders-list');
+
       if (data.success && data.orders.length > 0) {
         tbody.innerHTML = data.orders.map(order => `
-                        <tr>
-                            <td>${order.order_num}</td>
-                            <td>${order.first_name} ${order.last_name}</td>
-                            <td>${order.store_name}</td>
-                            <td>${new Date(order.order_date).toLocaleDateString()}</td>
-                            <td><span class="status-badge status-${order.status}">${order.status}</span></td>
-                            <td>$${parseFloat(order.total || 0).toFixed(2)}</td>
-                        </tr>
-                    `).join('');
+                    <tr>
+                        <td>${order.order_num}</td>
+                        <td>${order.first_name} ${order.last_name}</td>
+                        <td>${order.store_name}</td>
+                        <td>${new Date(order.order_date).toLocaleDateString()}</td>
+                        <td><span class="status-badge status-${order.status}">${order.status}</span></td>
+                        <td>$${parseFloat(order.total || 0).toFixed(2)}</td>
+                    </tr>
+                `).join('');
       } else {
         tbody.innerHTML = '<tr><td colspan="6">No orders found</td></tr>';
@@ -362,21 +375,21 @@
     // Mock report generation
     document.getElementById('report-results').innerHTML = `
-                <div class="dashboard-section">
-                    <h4>Generated Report: ${type}</h4>
-                    <p>Period: ${start} to ${end}</p>
-                    <div class="loading">Generating report...</div>
-                </div>
-            `;
+            <div class="dashboard-section">
+                <h4>Generated Report: ${type}</h4>
+                <p>Period: ${start} to ${end}</p>
+                <div class="loading">Generating report...</div>
+            </div>
+        `;
 
     // Simulate report generation
     setTimeout(() => {
       document.getElementById('report-results').innerHTML = `
-                    <div class="dashboard-section">
-                        <h4>Report Results</h4>
-                        <p><strong>Total Records:</strong> 42</p>
-                        <p><strong>Summary:</strong> Sample report data for demonstration</p>
-                        <button class="btn-small" onclick="downloadReport()">Download Report</button>
-                    </div>
-                `;
+                <div class="dashboard-section">
+                    <h4>Report Results</h4>
+                    <p><strong>Total Records:</strong> 42</p>
+                    <p><strong>Summary:</strong> Sample report data for demonstration</p>
+                    <button class="btn-small" onclick="downloadReport()">Download Report</button>
+                </div>
+            `;
     }, 1500);
   }
Index: interfejs/change-password.html
===================================================================
--- interfejs/change-password.html	(revision 4dff800e0e61b01aeb1b15846b32fb42aed69027)
+++ interfejs/change-password.html	(revision 79fff4f76fca5f42403a3ec1f9b04e1e66fd372d)
@@ -17,5 +17,5 @@
             <li><a href="index.html">Home</a></li>
             <li><a href="products.html">Products</a></li>
-            <li><a href="login.html">Login</a></li>
+            <li><a href="#" id="dashboard-link">Dashboard</a></li>
         </ul>
     </nav>
@@ -23,15 +23,12 @@
 
 <main>
-    <div class="form-container">
+    <div class="auth-container">
         <h2>Change Password</h2>
-        <p class="form-subtitle" id="password-message">Please set a new password</p>
-
-        <div id="error-message" class="error-message" style="display: none; color: red; margin-bottom: 1rem; padding: 10px; background-color: #ffeeee; border-radius: 5px;"></div>
-        <div id="success-message" class="success-message" style="display: none; color: green; margin-bottom: 1rem; padding: 10px; background-color: #eeffee; border-radius: 5px;"></div>
+        <div id="password-message" class="message"></div>
 
         <form id="change-password-form" class="form">
             <div class="form-group">
                 <label for="new-password">New Password</label>
-                <input type="password" id="new-password" name="new-password" required>
+                <input type="password" id="new-password" required>
                 <small class="password-hint">At least 8 characters with uppercase, lowercase, number, and special character</small>
             </div>
@@ -39,10 +36,8 @@
             <div class="form-group">
                 <label for="confirm-password">Confirm New Password</label>
-                <input type="password" id="confirm-password" name="confirm-password" required>
+                <input type="password" id="confirm-password" required>
             </div>
 
-            <div class="form-group">
-                <button type="submit" class="btn-primary btn-full" id="submit-btn">Change Password</button>
-            </div>
+            <button type="submit" class="btn-primary">Change Password</button>
         </form>
     </div>
@@ -62,4 +57,8 @@
             </ul>
         </div>
+        <div class="footer-section">
+            <h3>Contact</h3>
+            <p>Email: support@handcraft.com</p>
+        </div>
     </div>
     <div class="footer-bottom">
@@ -70,154 +69,89 @@
 <script src="script.js"></script>
 <script>
-    document.addEventListener('DOMContentLoaded', () => {
+    document.addEventListener('DOMContentLoaded', async function() {
         const urlParams = new URLSearchParams(window.location.search);
-        const isForced = urlParams.get('forced') === 'true';
-        let userType = 'admin'; // Default
+        const forced = urlParams.get('forced');
+        const redirect = urlParams.get('redirect');
 
-        if (isForced) {
-            document.getElementById('password-message').textContent =
-                'You must change your password before continuing.';
+        // Check if user is authenticated for password change
+        try {
+            const user = await loadUserData();
+            if (!user) {
+                window.location.href = 'login.html';
+                return;
+            }
+        } catch (error) {
+            console.error('Error loading user:', error);
+            window.location.href = 'login.html';
+            return;
         }
 
-        const form = document.getElementById('change-password-form');
-        const submitBtn = document.getElementById('submit-btn');
-        const errorDiv = document.getElementById('error-message');
-        const successDiv = document.getElementById('success-message');
+        if (forced === 'true') {
+            const messageDiv = document.getElementById('password-message');
+            messageDiv.className = 'message warning';
+            messageDiv.innerHTML = '⚠️ You are required to change your password before continuing.';
+        }
 
-        // Check if user is authenticated for password change and get user type
-        checkAuthStatus();
+        // Store redirect URL in session storage
+        if (redirect) {
+            sessionStorage.setItem('passwordChangeRedirect', redirect);
+        }
 
-        form.addEventListener('submit', async (e) => {
+        // Handle form submission
+        document.getElementById('change-password-form').addEventListener('submit', async function(e) {
             e.preventDefault();
-
-            // Clear previous messages
-            errorDiv.style.display = 'none';
-            successDiv.style.display = 'none';
-
-            // Disable submit button to prevent double submission
-            submitBtn.disabled = true;
-            submitBtn.textContent = 'Changing Password...';
 
             const newPassword = document.getElementById('new-password').value;
             const confirmPassword = document.getElementById('confirm-password').value;
 
-            // Client-side validation
-            if (!newPassword || !confirmPassword) {
-                showError('All fields are required');
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
+            if (newPassword !== confirmPassword) {
+                showMessage('Passwords do not match', 'error');
                 return;
             }
 
-            if (newPassword !== confirmPassword) {
-                showError('New passwords do not match');
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
+            // Password validation
+            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+            if (!passwordRegex.test(newPassword)) {
+                showMessage('Password must have at least 8 characters, including uppercase, lowercase, number and special character', 'error');
                 return;
             }
 
-            // Validate password strength
-            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
-            if (!passwordRegex.test(newPassword)) {
-                showError('Password must have at least 8 characters, including uppercase, lowercase, number and special character');
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
-                return;
-            }
-
-            const formData = {
-                newPassword: newPassword,
-                confirmPassword: confirmPassword
-            };
+            // Get redirect from session storage or URL
+            const redirectTo = sessionStorage.getItem('passwordChangeRedirect') || '';
 
             try {
-                console.log('Sending password change request...');
                 const response = await fetch('/api/force-change-password', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(formData),
-                    credentials: 'include' // Important: include cookies
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        newPassword,
+                        confirmPassword,
+                        redirectTo: redirectTo
+                    })
                 });
 
                 const data = await response.json();
-                console.log('Response:', data);
 
                 if (data.success) {
-                    showSuccess('Password changed successfully! Redirecting...');
+                    showMessage('Password changed successfully! Redirecting...', 'success');
+                    sessionStorage.removeItem('passwordChangeRedirect');
 
-                    // Clear form
-                    form.reset();
-
-                    // Redirect after short delay
+                    // Redirect to appropriate dashboard
                     setTimeout(() => {
                         window.location.href = data.redirectTo || 'dashboard.html';
                     }, 1500);
                 } else {
-                    showError(data.message || 'Failed to change password');
-                    submitBtn.disabled = false;
-                    submitBtn.textContent = 'Change Password';
+                    showMessage(data.message || 'Failed to change password', 'error');
                 }
             } catch (error) {
-                console.error('Password change error:', error);
-                showError('Network error: ' + error.message);
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'Change Password';
+                console.error('Error changing password:', error);
+                showMessage('An error occurred. Please try again.', 'error');
             }
         });
 
-        async function checkAuthStatus() {
-            try {
-                const response = await fetch('/api/user', {
-                    credentials: 'include'
-                });
-                const data = await response.json();
-
-                if (!data.success) {
-                    // Not authenticated, redirect to login
-                    window.location.href = 'login.html';
-                } else if (data.isTempSession) {
-                    console.log('Valid temporary session for password change');
-                    if (data.user && data.user.userType) {
-                        userType = data.user.userType;
-                    }
-                } else {
-                    // Already have full session, redirect to appropriate dashboard
-                    if (data.user && data.user.userType) {
-                        switch(data.user.userType) {
-                            case 'admin':
-                                window.location.href = 'admin.html';
-                                break;
-                            case 'store_owner':
-                                window.location.href = 'store-owner.html';
-                                break;
-                            case 'store_employee':
-                                window.location.href = 'store-employee.html';
-                                break;
-                            case 'client':
-                                window.location.href = 'client-dashboard.html';
-                                break;
-                            default:
-                                window.location.href = 'dashboard.html';
-                        }
-                    }
-                }
-            } catch (error) {
-                console.error('Auth check error:', error);
-            }
-        }
-
-        function showError(message) {
-            errorDiv.textContent = message;
-            errorDiv.style.display = 'block';
-            setTimeout(() => {
-                errorDiv.style.display = 'none';
-            }, 5000);
-        }
-
-        function showSuccess(message) {
-            successDiv.textContent = message;
-            successDiv.style.display = 'block';
+        function showMessage(msg, type) {
+            const messageDiv = document.getElementById('password-message');
+            messageDiv.className = 'message ' + type;
+            messageDiv.textContent = msg;
         }
     });
Index: interfejs/client-dashboard.html
===================================================================
--- interfejs/client-dashboard.html	(revision 4dff800e0e61b01aeb1b15846b32fb42aed69027)
+++ interfejs/client-dashboard.html	(revision 79fff4f76fca5f42403a3ec1f9b04e1e66fd372d)
@@ -18,4 +18,6 @@
       <li><a href="products.html">Products</a></li>
       <li><a href="#" id="dashboard-link" class="active">My Dashboard</a></li>
+      <li><a href="change-password.html" class="change-password-btn">🔑 Change Password</a></li>
+      <li><a href="#" id="logout-link">Logout</a></li>
     </ul>
   </nav>
@@ -96,5 +98,4 @@
             <input type="text" id="new-address" required>
           </div>
-
           <div class="form-row">
             <div class="form-group">
@@ -107,15 +108,12 @@
             </div>
           </div>
-
           <div class="form-group">
             <label for="new-country">Country *</label>
             <input type="text" id="new-country" required>
           </div>
-
           <div class="form-group checkbox">
             <input type="checkbox" id="new-is-default">
             <label for="new-is-default">Set as default address</label>
           </div>
-
           <button type="submit" class="btn-primary">Save Address</button>
           <button type="button" class="btn-secondary" id="cancel-add-address">Cancel</button>
@@ -158,10 +156,8 @@
             </select>
           </div>
-
           <div class="form-group">
             <label for="request-problem">Problem Description *</label>
             <textarea id="request-problem" rows="4" required></textarea>
           </div>
-
           <button type="submit" class="btn-primary">Submit Request</button>
           <button type="button" class="btn-secondary" id="cancel-new-request">Cancel</button>
@@ -262,4 +258,5 @@
   document.addEventListener('DOMContentLoaded', async () => {
     const user = await loadUserData();
+
     if (!user || user.userType !== 'client') {
       window.location.href = 'index.html';
@@ -268,4 +265,10 @@
 
     document.getElementById('client-name').textContent = `${user.firstName} ${user.lastName || ''}`;
+
+    // Logout functionality
+    document.getElementById('logout-link').addEventListener('click', async (e) => {
+      e.preventDefault();
+      await logout();
+    });
 
     // Load profile data
@@ -297,4 +300,5 @@
         document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
         document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
         btn.classList.add('active');
         document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active');
@@ -352,22 +356,24 @@
 
       const tbody = document.getElementById('orders-list');
+
       if (data.success && data.orders.length > 0) {
         tbody.innerHTML = data.orders.map(order => {
           const total = order.items ? order.items.reduce((sum, item) =>
                   sum + (item.price * item.quantity), 0) : 0;
+
           return `
-                            <tr>
-                                <td>${order.order_num}</td>
-                                <td>${order.store_name || 'Unknown'}</td>
-                                <td>${new Date(order.order_date).toLocaleDateString()}</td>
-                                <td><span class="status-badge status-${order.status}">${order.status}</span></td>
-                                <td>$${total.toFixed(2)}</td>
-                                <td>
-                                    <button class="btn-small" onclick="viewOrder('${order.order_num}')">View</button>
-                                    ${order.status === 'delivered' ?
+                        <tr>
+                            <td>${order.order_num}</td>
+                            <td>${order.store_name || 'Unknown'}</td>
+                            <td>${new Date(order.order_date).toLocaleDateString()}</td>
+                            <td><span class="status-badge status-${order.status}">${order.status}</span></td>
+                            <td>$${total.toFixed(2)}</td>
+                            <td>
+                                <button class="btn-small" onclick="viewOrder('${order.order_num}')">View</button>
+                                ${order.status === 'delivered' ?
                   `<button class="btn-small" onclick="reviewOrder('${order.order_num}')">Review</button>` : ''}
-                                </td>
-                            </tr>
-                        `;
+                            </td>
+                        </tr>
+                    `;
         }).join('');
       } else {
@@ -383,11 +389,11 @@
     // This would need a separate API endpoint
     document.getElementById('addresses-list').innerHTML = `
-                <div class="address-card">
-                    <p><strong>Default Address:</strong></p>
-                    <p>st. Center num.10, Skopje 1000, North Macedonia</p>
-                    <button class="btn-small">Edit</button>
-                    <button class="btn-small" style="background: var(--danger);">Delete</button>
-                </div>
-            `;
+            <div class="address-card">
+                <p><strong>Default Address:</strong></p>
+                <p>st. Center num.10, Skopje 1000, North Macedonia</p>
+                <button class="btn-small">Edit</button>
+                <button class="btn-small" style="background: var(--danger);">Delete</button>
+            </div>
+        `;
   }
 
Index: interfejs/store-employee.html
===================================================================
--- interfejs/store-employee.html	(revision 4dff800e0e61b01aeb1b15846b32fb42aed69027)
+++ interfejs/store-employee.html	(revision 79fff4f76fca5f42403a3ec1f9b04e1e66fd372d)
@@ -18,4 +18,6 @@
             <li><a href="products.html">Products</a></li>
             <li><a href="#" id="dashboard-link" class="active">Employee</a></li>
+            <li><a href="change-password.html" class="change-password-btn">🔑 Change Password</a></li>
+            <li><a href="#" id="logout-link">Logout</a></li>
         </ul>
     </nav>
@@ -170,4 +172,5 @@
 </main>
 
+<!-- Respond to Request Modal -->
 <div id="respond-request-modal" class="modal" style="display: none;">
     <div class="modal-content">
@@ -176,10 +179,8 @@
         <form id="respond-request-form" class="form">
             <input type="hidden" id="respond-request-num">
-
             <div class="form-group">
                 <label for="request-response">Your Response</label>
                 <textarea id="request-response" rows="4" required></textarea>
             </div>
-
             <div class="form-group">
                 <label for="request-status">Update Status</label>
@@ -190,5 +191,4 @@
                 </select>
             </div>
-
             <button type="submit" class="btn-primary">Submit Response</button>
         </form>
@@ -196,4 +196,5 @@
 </div>
 
+<!-- Process Refund Modal -->
 <div id="process-refund-modal" class="modal" style="display: none;">
     <div class="modal-content">
@@ -202,5 +203,4 @@
         <form id="process-refund-form" class="form">
             <input type="hidden" id="process-refund-id">
-
             <div class="form-group">
                 <label for="refund-action">Action</label>
@@ -210,10 +210,8 @@
                 </select>
             </div>
-
             <div class="form-group">
                 <label for="refund-notes">Notes</label>
                 <textarea id="refund-notes" rows="3"></textarea>
             </div>
-
             <button type="submit" class="btn-primary">Process Refund</button>
         </form>
@@ -244,4 +242,5 @@
     document.addEventListener('DOMContentLoaded', async () => {
         const user = await loadUserData();
+
         if (!user || user.userType !== 'store_employee') {
             window.location.href = 'index.html';
@@ -250,4 +249,10 @@
 
         document.getElementById('employee-name').textContent = `${user.firstName} ${user.lastName || ''}`;
+
+        // Logout functionality
+        document.getElementById('logout-link').addEventListener('click', async (e) => {
+            e.preventDefault();
+            await logout();
+        });
 
         // Load stores
@@ -277,4 +282,5 @@
                 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                 document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
                 btn.classList.add('active');
                 document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active');
@@ -316,4 +322,5 @@
                 // Display tasks
                 const tasksList = document.getElementById('tasks-list');
+
                 if (data.tasks.pending_orders.length > 0 || data.tasks.pending_requests.length > 0 || data.tasks.pending_refunds.length > 0) {
                     let tasksHtml = '<div class="task-items">';
@@ -323,9 +330,9 @@
                         data.tasks.pending_orders.forEach(order => {
                             tasksHtml += `
-                                    <div class="task-item">
-                                        <p><strong>Order #${order.order_num}</strong> - ${order.first_name} ${order.last_name}</p>
-                                        <button class="btn-small" onclick="updateOrderStatus('${order.order_num}')">Update Status</button>
-                                    </div>
-                                `;
+                                <div class="task-item">
+                                    <p><strong>Order #${order.order_num}</strong> - ${order.first_name} ${order.last_name}</p>
+                                    <button class="btn-small" onclick="updateOrderStatus('${order.order_num}')">Update Status</button>
+                                </div>
+                            `;
                         });
                     }
@@ -335,10 +342,10 @@
                         data.tasks.pending_requests.forEach(request => {
                             tasksHtml += `
-                                    <div class="task-item">
-                                        <p><strong>Request #${request.request_num}</strong> - ${request.first_name} ${request.last_name}</p>
-                                        <p>${request.problem.substring(0, 50)}${request.problem.length > 50 ? '...' : ''}</p>
-                                        <button class="btn-small" onclick="respondToRequest('${request.request_num}')">Respond</button>
-                                    </div>
-                                `;
+                                <div class="task-item">
+                                    <p><strong>Request #${request.request_num}</strong> - ${request.first_name} ${request.last_name}</p>
+                                    <p>${request.problem.substring(0, 50)}${request.problem.length > 50 ? '...' : ''}</p>
+                                    <button class="btn-small" onclick="respondToRequest('${request.request_num}')">Respond</button>
+                                </div>
+                            `;
                         });
                     }
@@ -348,10 +355,10 @@
                         data.tasks.pending_refunds.forEach(refund => {
                             tasksHtml += `
-                                    <div class="task-item">
-                                        <p><strong>Refund #${refund.refund_id}</strong> - Order #${refund.order_num}</p>
-                                        <p>Amount: $${parseFloat(refund.amount).toFixed(2)}</p>
-                                        <button class="btn-small" onclick="processRefund('${refund.refund_id}')">Process</button>
-                                    </div>
-                                `;
+                                <div class="task-item">
+                                    <p><strong>Refund #${refund.refund_id}</strong> - Order #${refund.order_num}</p>
+                                    <p>Amount: $${parseFloat(refund.amount).toFixed(2)}</p>
+                                    <button class="btn-small" onclick="processRefund('${refund.refund_id}')">Process</button>
+                                </div>
+                            `;
                         });
                     }
@@ -374,21 +381,23 @@
 
             const tbody = document.getElementById('orders-list');
+
             if (data.success && data.orders.length > 0) {
                 tbody.innerHTML = data.orders.map(order => {
                     const total = order.items ? order.items.reduce((sum, item) =>
                         sum + (item.price * item.quantity), 0) : 0;
+
                     return `
-                            <tr>
-                                <td>${order.order_num}</td>
-                                <td>${order.first_name} ${order.last_name}</td>
-                                <td>${new Date(order.order_date).toLocaleDateString()}</td>
-                                <td><span class="status-badge status-${order.status}">${order.status}</span></td>
-                                <td>$${total.toFixed(2)}</td>
-                                <td>
-                                    <button class="btn-small" onclick="updateOrderStatus('${order.order_num}')">Update</button>
-                                    <button class="btn-small" onclick="viewOrderDetails('${order.order_num}')">View</button>
-                                </td>
-                            </tr>
-                        `;
+                        <tr>
+                            <td>${order.order_num}</td>
+                            <td>${order.first_name} ${order.last_name}</td>
+                            <td>${new Date(order.order_date).toLocaleDateString()}</td>
+                            <td><span class="status-badge status-${order.status}">${order.status}</span></td>
+                            <td>$${total.toFixed(2)}</td>
+                            <td>
+                                <button class="btn-small" onclick="updateOrderStatus('${order.order_num}')">Update</button>
+                                <button class="btn-small" onclick="viewOrderDetails('${order.order_num}')">View</button>
+                            </td>
+                        </tr>
+                    `;
                 }).join('');
             } else {
@@ -417,16 +426,17 @@
 
             const tbody = document.getElementById('products-list');
+
             if (data.success && data.products.length > 0) {
                 tbody.innerHTML = data.products.map(product => `
-                        <tr>
-                            <td>${product.code}</td>
-                            <td>${product.description.substring(0, 30)}${product.description.length > 30 ? '...' : ''}</td>
-                            <td>$${parseFloat(product.price).toFixed(2)}</td>
-                            <td>${product.availability}</td>
-                            <td>
-                                <button class="btn-small" onclick="viewProduct('${product.code}')">View</button>
-                            </td>
-                        </tr>
-                    `).join('');
+                    <tr>
+                        <td>${product.code}</td>
+                        <td>${product.description.substring(0, 30)}${product.description.length > 30 ? '...' : ''}</td>
+                        <td>$${parseFloat(product.price).toFixed(2)}</td>
+                        <td>${product.availability}</td>
+                        <td>
+                            <button class="btn-small" onclick="viewProduct('${product.code}')">View</button>
+                        </td>
+                    </tr>
+                `).join('');
             } else {
                 tbody.innerHTML = '<tr><td colspan="5">No products found</td></tr>';
Index: interfejs/store-owner.html
===================================================================
--- interfejs/store-owner.html	(revision 4dff800e0e61b01aeb1b15846b32fb42aed69027)
+++ interfejs/store-owner.html	(revision 79fff4f76fca5f42403a3ec1f9b04e1e66fd372d)
@@ -18,4 +18,6 @@
             <li><a href="products.html">Products</a></li>
             <li><a href="#" id="dashboard-link" class="active">Store Owner</a></li>
+            <li><a href="change-password.html" class="change-password-btn">🔑 Change Password</a></li>
+            <li><a href="#" id="logout-link">Logout</a></li>
         </ul>
     </nav>
@@ -457,4 +459,10 @@
         document.getElementById('owner-name').textContent = `${user.firstName} ${user.lastName || ''}`;
 
+        // Logout functionality
+        document.getElementById('logout-link').addEventListener('click', async (e) => {
+            e.preventDefault();
+            await logout();
+        });
+
         // Load stores
         const stores = user.stores || [];
@@ -484,4 +492,5 @@
                 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                 document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
                 btn.classList.add('active');
                 document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active');
@@ -558,20 +567,21 @@
             const response = await fetch(`/api/store-products?storeId=${storeId}`);
             const data = await response.json();
+
             const tbody = document.getElementById('products-list');
 
             if (data.success && data.products.length > 0) {
                 tbody.innerHTML = data.products.map(product => `
-                        <tr>
-                            <td>${product.code}</td>
-                            <td>${product.description.substring(0, 30)}${product.description.length > 30 ? '...' : ''}</td>
-                            <td>$${parseFloat(product.price).toFixed(2)}</td>
-                            <td>${product.availability}</td>
-                            <td>${product.category_name || 'General'}</td>
-                            <td>
-                                <button class="btn-small" onclick="editProduct('${product.code}')">Edit</button>
-                                <button class="btn-small" style="background: var(--danger);" onclick="deleteProduct('${product.code}', '${storeId}')">Delete</button>
-                            </td>
-                        </tr>
-                    `).join('');
+                    <tr>
+                        <td>${product.code}</td>
+                        <td>${product.description.substring(0, 30)}${product.description.length > 30 ? '...' : ''}</td>
+                        <td>$${parseFloat(product.price).toFixed(2)}</td>
+                        <td>${product.availability}</td>
+                        <td>${product.category_name || 'General'}</td>
+                        <td>
+                            <button class="btn-small" onclick="editProduct('${product.code}')">Edit</button>
+                            <button class="btn-small" style="background: var(--danger);" onclick="deleteProduct('${product.code}', '${storeId}')">Delete</button>
+                        </td>
+                    </tr>
+                `).join('');
             } else {
                 tbody.innerHTML = '<tr><td colspan="6">No products found</td></tr>';
@@ -587,4 +597,5 @@
             const response = await fetch(`/api/store-orders?storeId=${storeId}`);
             const data = await response.json();
+
             const tbody = document.getElementById('orders-list');
 
@@ -593,16 +604,17 @@
                     const total = order.items ? order.items.reduce((sum, item) =>
                         sum + (item.price * item.quantity), 0) : 0;
+
                     return `
-                            <tr>
-                                <td>${order.order_num}</td>
-                                <td>${order.first_name} ${order.last_name}</td>
-                                <td>${new Date(order.order_date).toLocaleDateString()}</td>
-                                <td><span class="status-badge status-${order.status}">${order.status}</span></td>
-                                <td>$${total.toFixed(2)}</td>
-                                <td>
-                                    <button class="btn-small" onclick="viewOrder('${order.order_num}')">View</button>
-                                </td>
-                            </tr>
-                        `;
+                        <tr>
+                            <td>${order.order_num}</td>
+                            <td>${order.first_name} ${order.last_name}</td>
+                            <td>${new Date(order.order_date).toLocaleDateString()}</td>
+                            <td><span class="status-badge status-${order.status}">${order.status}</span></td>
+                            <td>$${total.toFixed(2)}</td>
+                            <td>
+                                <button class="btn-small" onclick="viewOrder('${order.order_num}')">View</button>
+                            </td>
+                        </tr>
+                    `;
                 }).join('');
             } else {
@@ -619,20 +631,21 @@
             const response = await fetch(`/api/store-employees?storeId=${storeId}`);
             const data = await response.json();
+
             const tbody = document.getElementById('employees-list');
 
             if (data.success && data.employees.length > 0) {
                 tbody.innerHTML = data.employees.map(emp => `
-                        <tr>
-                            <td>${emp.id}</td>
-                            <td>${emp.first_name} ${emp.last_name}</td>
-                            <td>${emp.email}</td>
-                            <td>${emp.date_of_hire || 'N/A'}</td>
-                            <td><span class="status-badge">${emp.permission_type || 'EMPLOYEE'}</span></td>
-                            <td>
-                                <button class="btn-small" onclick="editEmployee('${emp.id}')">Edit</button>
-                                <button class="btn-small" style="background: var(--danger);" onclick="deleteEmployee('${emp.id}', '${storeId}')">Delete</button>
-                            </td>
-                        </tr>
-                    `).join('');
+                    <tr>
+                        <td>${emp.id}</td>
+                        <td>${emp.first_name} ${emp.last_name}</td>
+                        <td>${emp.email}</td>
+                        <td>${emp.date_of_hire || 'N/A'}</td>
+                        <td><span class="status-badge">${emp.permission_type || 'EMPLOYEE'}</span></td>
+                        <td>
+                            <button class="btn-small" onclick="editEmployee('${emp.id}')">Edit</button>
+                            <button class="btn-small" style="background: var(--danger);" onclick="deleteEmployee('${emp.id}', '${storeId}')">Delete</button>
+                        </td>
+                    </tr>
+                `).join('');
             } else {
                 tbody.innerHTML = '<tr><td colspan="6">No employees found</td></tr>';
@@ -661,4 +674,5 @@
                     `<option value="${cat.category_id}">${cat.name}</option>`
                 ).join('');
+
                 document.getElementById('category-parent').innerHTML = '<option value="">None (Top Level Category)</option>' + parentOptions;
             }
@@ -787,4 +801,5 @@
                 document.getElementById('add-product-form').reset();
                 loadProducts(storeId);
+
                 // Switch to products tab
                 document.querySelector('[data-tab="products"]').click();
@@ -839,4 +854,5 @@
                 document.getElementById('add-employee-form').reset();
                 loadEmployees(storeId);
+
                 // Switch to employees tab
                 document.querySelector('[data-tab="employees"]').click();
@@ -1061,9 +1077,9 @@
 
         document.getElementById('report-results').innerHTML = `
-                <div class="dashboard-section">
-                    <h4>Generating Report...</h4>
-                    <div class="loading">Please wait</div>
-                </div>
-            `;
+            <div class="dashboard-section">
+                <h4>Generating Report...</h4>
+                <div class="loading">Please wait</div>
+            </div>
+        `;
 
         try {
@@ -1084,28 +1100,28 @@
             if (data.success) {
                 document.getElementById('report-results').innerHTML = `
-                        <div class="dashboard-section">
-                            <h4>Report Generated Successfully</h4>
-                            <p><strong>Report ID:</strong> ${data.reportId}</p>
-                            <p><strong>Period:</strong> ${data.report.period}</p>
-                            <p><strong>Date Range:</strong> ${data.report.startDate} to ${data.report.endDate}</p>
-                            <p><strong>Type:</strong> ${data.report.type}</p>
-                            <p><strong>Generated:</strong> ${new Date(data.report.generatedAt).toLocaleString()}</p>
-                            <button class="btn-small" onclick="downloadReport('${data.reportId}')">Download Report</button>
-                        </div>
-                    `;
+                    <div class="dashboard-section">
+                        <h4>Report Generated Successfully</h4>
+                        <p><strong>Report ID:</strong> ${data.reportId}</p>
+                        <p><strong>Period:</strong> ${data.report.period}</p>
+                        <p><strong>Date Range:</strong> ${data.report.startDate} to ${data.report.endDate}</p>
+                        <p><strong>Type:</strong> ${data.report.type}</p>
+                        <p><strong>Generated:</strong> ${new Date(data.report.generatedAt).toLocaleString()}</p>
+                        <button class="btn-small" onclick="downloadReport('${data.reportId}')">Download Report</button>
+                    </div>
+                `;
             } else {
                 document.getElementById('report-results').innerHTML = `
-                        <div class="dashboard-section">
-                            <p class="error">Failed to generate report: ${data.message}</p>
-                        </div>
-                    `;
+                    <div class="dashboard-section">
+                        <p class="error">Failed to generate report: ${data.message}</p>
+                    </div>
+                `;
             }
         } catch (error) {
             console.error('Error generating report:', error);
             document.getElementById('report-results').innerHTML = `
-                    <div class="dashboard-section">
-                        <p class="error">An error occurred while generating the report</p>
-                    </div>
-                `;
+                <div class="dashboard-section">
+                    <p class="error">An error occurred while generating the report</p>
+                </div>
+            `;
         }
     }