Index: src/main/java/com/example/domify/service/impl/ListingServiceImpl.java
===================================================================
--- src/main/java/com/example/domify/service/impl/ListingServiceImpl.java	(revision 9d01998bfd2aa71e05b5cf3a9c426e1faa5c1ad6)
+++ src/main/java/com/example/domify/service/impl/ListingServiceImpl.java	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -5,7 +5,5 @@
 import com.example.domify.service.ListingService;
 import org.springframework.stereotype.Service;
-import org.springframework.web.multipart.MultipartFile;
 
-import java.io.IOException;
 import java.util.List;
 
Index: src/main/java/com/example/domify/web/DocumentsController.java
===================================================================
--- src/main/java/com/example/domify/web/DocumentsController.java	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
+++ src/main/java/com/example/domify/web/DocumentsController.java	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -0,0 +1,14 @@
+package com.example.domify.web;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping("/documents")
+public class DocumentsController {
+    @GetMapping
+    public String getDocuments() {
+        return "documents";
+    }
+}
Index: src/main/java/com/example/domify/web/ServicesController.java
===================================================================
--- src/main/java/com/example/domify/web/ServicesController.java	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
+++ src/main/java/com/example/domify/web/ServicesController.java	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -0,0 +1,21 @@
+package com.example.domify.web;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+
+@Controller
+@RequestMapping("/services")
+public class ServicesController {
+    @GetMapping
+    public String getServices() {
+        return "services";
+    }
+
+    @GetMapping("/details")
+    public String getServicesDetails() {
+        return "service-details";
+    }
+
+}
Index: src/main/resources/templates/documents.html
===================================================================
--- src/main/resources/templates/documents.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
+++ src/main/resources/templates/documents.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="mk">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Domify - Почетна</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+  <style>
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, #f5fafd 0%, #e3f0ff 100%);
+    }
+
+    .header-gradient {
+      background: linear-gradient(90deg, #1976d2 0%, #64b5f6 100%);
+    }
+  </style>
+</head>
+<body>
+
+<div th:replace="fragments/header :: appHeader(${user}, ${isLandlord})"></div>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="m-auto w-75">
+      <div class="d-flex justify-content-between align-items-end">
+      <h2 class="mt-5 mb-3" style="color:#1976d2;">Документи</h2>
+        <a href="/lease" class="btn btn-outline-primary mb-3" style="height: 40px;">
+          Назад
+        </a>
+      </div>
+      <div class="table-responsive rounded-4 shadow-sm">
+        <table class="table table-hover align-middle mb-0">
+          <thead class="table-primary" style="background-color: #e3f2fd;">
+          <tr>
+            <th class="py-3 px-4">Име на оглас</th>
+            <th class="py-3 px-4">Датум</th>
+            <th class="py-3 px-4">Детали</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td class="py-3 px-4 text-primary">Договор</td>
+            <td class="py-3 px-4">2025-05-03</td>
+            <td class="py-3 px-4">
+              <button class="btn btn-sm btn-outline-primary rounded-pill px-3">
+                Превземи
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class="py-3 px-4 text-primary">Лична карта - Милош</td>
+            <td class="py-3 px-4">2025-07-09</td>
+            <td class="py-3 px-4">
+              <button class="btn btn-sm btn-outline-primary rounded-pill px-3">
+                Превземи
+              </button>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <button class="btn text-light header-gradient mt-4">Додади документ</button>
+    </div>
+  </div>
+
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+  document.querySelectorAll('.sub-item').forEach(item => {
+    item.addEventListener('click', function (e) {
+      e.preventDefault();
+      const city = this.getAttribute('data-city');
+      const muni = this.getAttribute('data-muni');
+      document.getElementById('addressDropdown').textContent = `${city} - ${muni}`;
+      bootstrap.Dropdown.getInstance(document.getElementById('addressDropdown')).hide();
+    });
+  });
+</script>
+</body>
+</html>
Index: src/main/resources/templates/lease.html
===================================================================
--- src/main/resources/templates/lease.html	(revision 9d01998bfd2aa71e05b5cf3a9c426e1faa5c1ad6)
+++ src/main/resources/templates/lease.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -80,5 +80,4 @@
       </div>
 
-      <!-- Financial Information -->
       <div class="pt-3">
         <div class="d-flex justify-content-between py-2">
@@ -99,5 +98,4 @@
       </div>
 
-      <!-- Parties Information -->
       <div class="border-top pt-3 mt-3">
         <div class="d-flex justify-content-between py-2">
@@ -130,5 +128,5 @@
     </div>
 
-    <div style="width: 55%;">
+    <div style="width: 55%;" class="m-auto">
       <img th:src="${lease.listing.unit.images[0].image}"
            th:alt="${lease.listing.title}"
@@ -139,8 +137,7 @@
   </div>
 
-  <!-- Property Description -->
   <div class="info-section mt-4 p-4 rounded-4 shadow-sm">
     <h4 class="text-primary mb-3">
-      <i class="bi bi-info-circle me-2"></i>Опис на имотот
+      <i class="bi bi-info-circle me-2"></i>Опис
     </h4>
     <p th:text="${lease.listing.description}" class="mb-0">
@@ -149,8 +146,7 @@
   </div>
 
-  <!-- Property Details -->
   <div class="info-section mt-4 p-4 rounded-4 shadow-sm">
     <h4 class="text-primary mb-3">
-      <i class="bi bi-house me-2"></i>Детали за имотот
+      <i class="bi bi-house me-2"></i>Детали за единицата
     </h4>
     <div class="row">
@@ -180,18 +176,17 @@
   </div>
 
-  <!-- Action Buttons -->
   <div class="mt-4 d-flex justify-content-around align-items-center flex-wrap gap-3">
     <button class="btn text-white px-4 py-2 rounded-4 shadow-sm header-gradient action-btn">
       <i class="bi bi-chat-dots me-2"></i>Пораки
     </button>
-    <button class="btn text-white px-4 py-2 rounded-4 shadow-sm header-gradient action-btn">
-      <i class="bi bi-file-earmark-text me-2"></i>Документи
-    </button>
+    <a href="/documents" class="btn text-white px-4 py-2 rounded-4 shadow-sm header-gradient action-btn text-decoration-none">
+      <i class="bi bi-chat-dots me-2"></i>Документи
+    </a>
     <button class="btn text-white px-4 py-2 rounded-4 shadow-sm header-gradient action-btn">
       <i class="bi bi-search me-2"></i>Инспекции
     </button>
-    <button class="btn text-white px-4 py-2 rounded-4 shadow-sm header-gradient action-btn">
-      <i class="bi bi-tools me-2"></i>Сервиси
-    </button>
+    <a href="/services" class="btn text-white px-4 py-2 rounded-4 shadow-sm header-gradient action-btn text-decoration-none">
+      <i class="bi bi-chat-dots me-2"></i>Сервиси
+    </a>
     <button class="btn text-white px-4 py-2 rounded-4 shadow-sm header-gradient action-btn">
       <i class="bi bi-credit-card me-2"></i>Плаќања
Index: src/main/resources/templates/leases.html
===================================================================
--- src/main/resources/templates/leases.html	(revision 9d01998bfd2aa71e05b5cf3a9c426e1faa5c1ad6)
+++ src/main/resources/templates/leases.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -164,5 +164,4 @@
                   console.error('Error saving rating:', err);
                   alert('Грешка при зачувување на оценката: ' + err.message);
-                  // Reset stars on error
                   currentRating = 0;
                   setStars(currentRating);
Index: src/main/resources/templates/properties.html
===================================================================
--- src/main/resources/templates/properties.html	(revision 9d01998bfd2aa71e05b5cf3a9c426e1faa5c1ad6)
+++ src/main/resources/templates/properties.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -43,15 +43,15 @@
                          alt="Property Image">
                 </div>
-                <div class="col-md-8">
-                    <div class="card-body">
+                <div class="col-md-8 d-flex">
+                    <div class="card-body d-flex flex-column h-100">
                         <div class="d-flex justify-content-between">
                             <h5 class="card-title text-primary" th:text="${property.getTitle()}">Property Title</h5>
-                            <p class="card-text text-primary">
+                            <p class="card-text  text-primary">
                                 <small class="fw-bold" th:text="${property.getPropertyType().getName()}">Property Type</small>
                             </p>
                         </div>
-                        <p class="card-text" th:text="${property.getDescription()}">Property description here...</p>
-                        <div class="d-flex justify-content-between">
-                            <p class="card-text text-primary">
+                        <p class="card-text flex-grow-1" th:text="${property.getDescription()}">Property description here...</p>
+                        <div class="d-flex justify-content-between mt-auto">
+                            <p class="card-text text-primary ">
                                 <small th:text="${#temporals.format(property.createdAt, 'yyyy-MM-dd')}">Created Date</small>
                             </p>
Index: src/main/resources/templates/service-details.html
===================================================================
--- src/main/resources/templates/service-details.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
+++ src/main/resources/templates/service-details.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="mk">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Domify - Детали за сервисна порака</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+  <style>
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, #f5fafd 0%, #e3f0ff 100%);
+    }
+    .header-gradient {
+      background: linear-gradient(90deg, #1976d2 0%, #64b5f6 100%);
+    }
+    .status-pending {
+      color: #ff9800;
+      background-color: #fff3e0;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+    }
+    /*.status-completed {*/
+    /*  color: #4caf50;*/
+    /*  background-color: #e8f5e9;*/
+    /*  padding: 0.25rem 0.5rem;*/
+    /*  border-radius: 0.25rem;*/
+    /*}*/
+    /*.status-in-progress {*/
+    /*  color: #2196f3;*/
+    /*  background-color: #e3f2fd;*/
+    /*  padding: 0.25rem 0.5rem;*/
+    /*  border-radius: 0.25rem;*/
+    /*}*/
+  </style>
+</head>
+<body>
+<div>
+  <div th:replace="fragments/header :: appHeader(${user}, ${isLandlord})"></div>
+</div>
+
+<div class="mt-4 bg-light-subtle rounded-4 shadow-sm p-5 m-auto mb-4 w-50">
+  <a href="/services" class="btn btn-outline-primary">
+    <i class="bi bi-arrow-left me-2"></i> Назад кон сервисни пораки
+  </a>
+
+  <div class="d-flex justify-content-between align-items-start gap-4 mt-4">
+    <div class="m-auto" style="width: 100%;">
+      <h2 class="text-primary mb-4 fw-bold">Детали за сервисна порака</h2>
+
+      <div class="border-top border-bottom py-3">
+        <div class="d-flex justify-content-between py-2">
+          <span class="text-primary fw-medium">Категорија:</span>
+          <span class="text-dark fw-bold">Електрика</span>
+        </div>
+        <div class="d-flex justify-content-between py-2">
+          <span class="text-primary fw-medium">Датум:</span>
+          <span class="text-dark">2024-07-01</span>
+        </div>
+        <div class="d-flex justify-content-between py-2">
+          <span class="text-primary fw-medium">Статус:</span>
+          <span class="status-pending">Во чекање</span>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="bg-light mt-3 p-4 rounded-4 shadow-sm m-auto mt-5">
+    <h4 class="text-primary">Опис на проблемот:</h4>
+    <p>Светлото во ходникот не работи.</p>
+  </div>
+
+  <div class="m-auto w-75 mt-5">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <div>
+        <button class="btn btn-success me-2" onclick="updateStatus(1, 'COMPLETED')">
+          <i class="bi bi-check-circle me-2"></i>Означи како завршено
+        </button>
+        <a href="/service-requests/1/messages" class="btn btn-primary">
+          <i class="bi bi-chat-dots me-2"></i>Пораки и логови
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+  function updateStatus(requestId, status) {
+    fetch('/api/service-requests/' + requestId + '/status', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ status: status })
+    })
+            .then(response => {
+              if (response.ok) {
+                location.reload();
+              } else {
+                alert('Грешка при ажурирање на статусот');
+              }
+            })
+            .catch(error => console.error('Error:', error));
+  }
+</script>
+</body>
+</html>
Index: src/main/resources/templates/services.html
===================================================================
--- src/main/resources/templates/services.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
+++ src/main/resources/templates/services.html	(revision 303b3cb45d5f45a424fe584845a1f437ca121d6d)
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="mk">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Domify - Почетна</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+  <style>
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, #f5fafd 0%, #e3f0ff 100%);
+    }
+
+    .header-gradient {
+      background: linear-gradient(90deg, #1976d2 0%, #64b5f6 100%);
+    }
+  </style>
+</head>
+<body>
+<div th:replace="fragments/header :: appHeader(${user}, ${isLandlord})"></div>
+
+
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="m-auto w-75">
+      <div class="d-flex justify-content-between align-items-end">
+        <h2 class="mt-5 mb-3" style="color:#1976d2;">Сервиси</h2>
+        <a href="/lease" class="btn btn-outline-primary mb-3" style="height: 40px;">
+          Назад
+        </a>
+      </div>      <div class="table-responsive rounded-4 shadow-sm">
+        <table class="table table-hover align-middle mb-0">
+          <thead class="table-primary" style="background-color: #e3f2fd;">
+          <tr>
+            <th class="py-3 px-4">Краток Опис</th>
+            <th class="py-3 px-4">Датум</th>
+            <th class="py-3 px-4">Статус</th>
+            <th class="py-3 px-4">Акции</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td class="py-3 px-4 text-primary">Проблем во кујна</td>
+            <td class="py-3 px-4">2025-05-03</td>
+            <td class="py-3 px-4"><span class="text-warning fw-bold">ВО ТЕК</span></td>
+            <td class="py-3 px-4">
+              <a href="/services/details" class="btn btn-sm btn-outline-primary rounded-pill px-3">
+                Детали
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td class="py-3 px-4 text-primary">Поправка на чешма</td>
+            <td class="py-3 px-4">2025-07-09</td>
+            <td class="py-3 px-4"><span class="text-success fw-bold">ЗАВРШЕНО</span></td>
+            <td class="py-3 px-4">
+              <a href="/services/details" class="btn btn-sm btn-outline-primary rounded-pill px-3">
+                Детали
+              </a>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <button class="btn text-light header-gradient mt-4">Пријави проеблем</button>
+    </div>
+  </div>
+
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+  document.querySelectorAll('.sub-item').forEach(item => {
+    item.addEventListener('click', function (e) {
+      e.preventDefault();
+      const city = this.getAttribute('data-city');
+      const muni = this.getAttribute('data-muni');
+      document.getElementById('addressDropdown').textContent = `${city} - ${muni}`;
+      bootstrap.Dropdown.getInstance(document.getElementById('addressDropdown')).hide();
+    });
+  });
+</script>
+</body>
+</html>
