Index: docs/todo.txt
===================================================================
--- docs/todo.txt	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ docs/todo.txt	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -40,4 +40,5 @@
 - edit na chat messages
 - statistiki za userot vo public profile page (vo kolku proekti rabotel, kolku vreme e vo nekoj proekt ...)
+- Najpopularni tags, vo smisla koj sa najkoristeni.
 ------------
 
Index: src/main/java/com/db/finki/www/build_board/entity/thread/Project.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/thread/Project.java	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/java/com/db/finki/www/build_board/entity/thread/Project.java	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -55,4 +55,6 @@
         return "projects";
     }
+
+
     public String getDescription() {return content;}
     public void setDescription(String description) {this.content = description;}
Index: src/main/java/com/db/finki/www/build_board/entity/thread/Topic.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/thread/Topic.java	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/java/com/db/finki/www/build_board/entity/thread/Topic.java	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -30,3 +30,4 @@
         return "topics";
     }
+
 }
Index: src/main/java/com/db/finki/www/build_board/entity/thread/itf/NamedThread.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/thread/itf/NamedThread.java	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/java/com/db/finki/www/build_board/entity/thread/itf/NamedThread.java	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -1,3 +1,7 @@
 package com.db.finki.www.build_board.entity.thread.itf;
+
+import com.db.finki.www.build_board.entity.user_type.BBUser;
+
+import java.time.LocalDateTime;
 
 public interface NamedThread {
@@ -5,3 +9,6 @@
     String getTypeName();
     Integer getId();
+    String getContent();
+    BBUser getUser();
+    LocalDateTime getCreatedAt();
 }
Index: src/main/java/com/db/finki/www/build_board/repository/thread/BBThreadRepository.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/repository/thread/BBThreadRepository.java	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/java/com/db/finki/www/build_board/repository/thread/BBThreadRepository.java	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -2,4 +2,5 @@
 
 import com.db.finki.www.build_board.entity.thread.BBThread;
+import com.db.finki.www.build_board.entity.thread.itf.NamedThread;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.stereotype.Repository;
Index: src/main/java/com/db/finki/www/build_board/service/search/FilterMap.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/search/FilterMap.java	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/java/com/db/finki/www/build_board/service/search/FilterMap.java	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -1,5 +1,8 @@
 package com.db.finki.www.build_board.service.search;
 
+import com.db.finki.www.build_board.entity.thread.BBThread;
+import com.db.finki.www.build_board.entity.thread.Tag;
 import com.db.finki.www.build_board.entity.thread.itf.NamedThread;
+import jakarta.persistence.criteria.Join;
 import org.springframework.data.jpa.domain.Specification;
 import org.springframework.stereotype.Component;
@@ -19,5 +22,5 @@
                 return (root, query, cb) -> null;
             } else {
-                return (root, query, cb) -> cb.like(cb.lower(root.get("title")),  param.toLowerCase() + "%" );
+                return (root, query, cb) -> cb.like(cb.lower(root.get("title")), param.toLowerCase() + "%");
             }
         });
Index: src/main/java/com/db/finki/www/build_board/service/search/SearchServiceImpl.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/search/SearchServiceImpl.java	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/java/com/db/finki/www/build_board/service/search/SearchServiceImpl.java	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -51,4 +51,8 @@
             type = "all";
         }
+        if(filters == null || filters.isEmpty()){
+            filters = new ArrayList<>();
+            filters.add("all");
+        }
 
         if(Objects.equals(type, "project")){
@@ -64,4 +68,6 @@
         }
 
+
+
         return result;
     }
Index: src/main/resources/templates/home_pages/home.html
===================================================================
--- src/main/resources/templates/home_pages/home.html	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/resources/templates/home_pages/home.html	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -9,8 +9,9 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link href="/css/icon.css">
 
     <style>
         .search-container {
-            position:  relative;
+            position: relative;
         }
 
@@ -31,7 +32,21 @@
         }
 
-        .content-max-width{
+        .content-max-width {
             width: max-content;
         }
+
+        .transition-card {
+            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        }
+
+        .transition-card:hover {
+            transform: scale(1.02);
+            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+        }
+
+        .thread-buttons-div {
+            margin-right: 12.8%;
+        }
+
     </style>
 </head>
@@ -69,5 +84,5 @@
                     </div>
                     <div class="nav-item d-flex align-items-center" th:if="${session.user != null}">
-                        <span class="nav-link mb-0 me-1" th:text="${session.user.getUsername()}" >Username</span>
+                        <span class="nav-link mb-0 me-1" th:text="${session.user.getUsername()}">Username</span>
                         <span class="nav-link mb-0" th:text="| (${session.user!=null ? #strings.capitalize(
                         session.user.getAuthority().get(0).getAuthority().substring(5).replace('_',' ').toLowerCase()) : ''})|"></span>
@@ -146,26 +161,85 @@
 
 
+<!--<main class="container mt-4">-->
+<!--    <div class="d-flex justify-content-between align-items-center mb-3">-->
+<!--        <h1 class="h4">Threads</h1>-->
+<!--        <div th:if="${session.user!=null}">-->
+<!--            <a href="/topics/create" class="btn btn-success btn-sm">Create Topic</a>-->
+<!--            <a href="projects/create" class="btn btn-success btn-sm">Create Project</a>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--    <div class="list-group">-->
+<!--        <div class="list-group-item" th:each="thread : ${threads}">-->
+<!--            <div class="d-flex w-100 justify-content-between">-->
+<!--                <div class="card shadow-sm mb-4">-->
+<!--                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">-->
+<!--                        <h3 th:text="${thread.getTitle()}">Topic Title</h3>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--&lt;!&ndash;                <h5 class="mb-1">&ndash;&gt;-->
+<!--&lt;!&ndash;                    &ndash;&gt;-->
+<!--&lt;!&ndash;                    <a th:href="@{/{type}/{id} (type=${thread.getTypeName()},id=${thread.getId()})}"&ndash;&gt;-->
+<!--&lt;!&ndash;                       th:text="${thread.getTitle()}" class="text-decoration-none"></a>&ndash;&gt;-->
+<!--&lt;!&ndash;                </h5>&ndash;&gt;-->
+<!--                &lt;!&ndash;                <small th:text="${thread.getFormattedDate()}">Date</small>&ndash;&gt;-->
+<!--            </div>-->
+<!--            &lt;!&ndash;            <p class="mb-1 text-muted" th:text="${thread.getDescription()}">Thread description here...</p>&ndash;&gt;-->
+<!--            &lt;!&ndash;            <small th:text="${thread.getAuthor()}">Posted by Author</small>&ndash;&gt;-->
+<!--        </div>-->
+<!--    </div>-->
+<!--</main>-->
+
 <main class="container mt-4">
-    <div class="d-flex justify-content-between align-items-center mb-3">
-        <h1 class="h4">Threads</h1>
-        <div th:if="${session.user!=null}">
+    <div class="d-flex justify-content-end align-items-center mb-3 thread-buttons-div">
+        <div th:if="${session.user != null}">
             <a href="/topics/create" class="btn btn-success btn-sm">Create Topic</a>
-            <a href="projects/create" class="btn btn-success btn-sm">Create Project</a>
-        </div>
-    </div>
-    <div class="list-group">
-        <div class="list-group-item" th:each="thread : ${threads}">
-            <div class="d-flex w-100 justify-content-between">
-                <h5 class="mb-1">
-                    <a th:href="@{/{type}/{id} (type=${thread.getTypeName()},id=${thread.getId()})}"
-                       th:text="${thread.getTitle()}" class="text-decoration-none"></a>
-                </h5>
-                <!--                <small th:text="${thread.getFormattedDate()}">Date</small>-->
+            <a href="/projects/create" class="btn btn-success btn-sm">Create Project</a>
+        </div>
+    </div>
+
+<!--    <p th:text="|Submitted on: ${#temporals.format(req.getCreatedAt(), 'dd/MM/yyyy  HH:mm')}|"></p>-->
+
+    <div class="d-flex justify-content-center">
+        <div class="list-group w-75">
+            <div class="list-group-item p-0 border-0" th:each="thread : ${threads}">
+                <!-- Make the entire card clickable -->
+                <a th:href="@{/{type}/{title}(title=${thread.getId()}, type=${thread.getTypeName()})}"
+                   class="text-decoration-none">
+                    <div class="card shadow-sm mb-4 border-0 transition-card">
+                        <div class="card-header bg-light p-3 d-flex justify-content-between align-items-center">
+                            <h4 th:text="${thread.getTitle()}" class="card-title mb-0 text-truncate"
+                                style="max-width: 70%;">Thread Title</h4>
+                            <div>
+                                <img alt="user-logo" class="rounded-circle border border-1 border-info"
+                                     style="width: 3em; height: 3em" th:src="${thread.getUser().getAvatarUrl()}">
+                                <small class="fst-italic" th:text="${thread.getUser().getUsername()}"></small>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <p th:text="${thread.getContent()}" class="card-text lead text-secondary fs-6 fw-bold text-truncate" style="max-width: 50%">Thread content goes
+                                here.</p>
+                        </div>
+                        <small  class="p-2 text-muted" th:text="${#temporals.format(thread.getCreatedAt(), 'dd/MM/yyyy &bull; HH:mm')}"></small>
+
+                    </div>
+                </a>
             </div>
-            <!--            <p class="mb-1 text-muted" th:text="${thread.getDescription()}">Thread description here...</p>-->
-            <!--            <small th:text="${thread.getAuthor()}">Posted by Author</small>-->
         </div>
     </div>
 </main>
+
+
+<!-- Tags (optional) -->
+<!--                <div th:if="${thread.getTags() != null}">-->
+<!--                    <h6>Tags:</h6>-->
+<!--                    <ul class="list-inline">-->
+<!--                        <li th:each="tag : ${thread.getTags()}" class="list-inline-item">-->
+<!--                            <span class="badge bg-info text-dark">-->
+<!--                                <span th:text="${tag.getName()}">Tag Name</span>-->
+<!--                            </span>-->
+<!--                        </li>-->
+<!--                    </ul>-->
+<!--                </div>-->
+
 
 <script th:inline="javascript">
Index: src/main/resources/templates/project_pages/show-project.html
===================================================================
--- src/main/resources/templates/project_pages/show-project.html	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/resources/templates/project_pages/show-project.html	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -16,4 +16,7 @@
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    }
+        .badge{
+            background: #00e7ff80;
+        }
    </style>
 </head>
@@ -69,5 +72,4 @@
             </div>
             <div th:if="${!project.getTags().isEmpty()}">
-                <h6>Tags:</h6>
                 <ul class="list-inline">
                     <li th:each="tag : ${project.getTags()}"
Index: src/main/resources/templates/show-topic.html
===================================================================
--- src/main/resources/templates/show-topic.html	(revision 40c7170052a1a69c4de3ac9f5161e6871251760e)
+++ src/main/resources/templates/show-topic.html	(revision b99c060e9912f5ace722647c3fbedb501788c4c7)
@@ -30,4 +30,7 @@
             font-weight: bold;
             box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+        }
+        .badge{
+            background: #00e7ff80
         }
     </style>
@@ -51,54 +54,39 @@
             </button>
         </div>
-        <div class="card-body">
-            <p th:text="${topic.getContent()}">Description of the topic goes here.</p>
-            <!-- Tags Section -->
-            <div>
-                <h6>Tags:</h6>
-                <ul class="list-inline">
-                    <li th:each="tag : ${topic.getTags()}" class="list-inline-item">
-            <span class="badge bg-info text-dark d-inline-flex align-items-center">
-                <span th:text="${tag.getName()}">Tag Name</span>
-                <form th:if="${session.user!=null && session.user.equals(topic.getUser())}"
-                      th:action="@{/topics/{topicId}/tags/{tag-name}/delete (topicId=${topic.getId()}, tag-name=${tag.getName()})}"
-                      method="post" style="margin-left: 5px;">
-                    <button type="submit" class="btn btn-sm btn-link text-danger p-0 ms-1" style="line-height: 1;">
-                        &times;
-                    </button>
-                    <input th:if="${session.user!=null}" type="hidden" name="username"
-                           th:value="${session.user.username}"/>
-                </form>
-            </span>
-                    </li>
-                </ul>
+
+        <div class="card-body d-flex flex-column justify-content-between">
+            <!-- Top Section: Description + Tags -->
+            <div class="d-flex justify-content-between">
+                <p th:text="${topic.getContent()}">Description of the topic goes here.</p>
+                <!-- Tags Section -->
+                <div>
+                    <ul class="list-inline text-end">
+                        <li th:each="tag : ${topic.getTags()}" class="list-inline-item">
+                        <span class="badge text-dark d-inline-flex align-items-center">
+                            <span th:text="${tag.getName()}">Tag Name</span>
+                            <form th:if="${session.user!=null && session.user.equals(topic.getUser())}"
+                                  th:action="@{/topics/{topicId}/tags/{tag-name}/delete (topicId=${topic.getId()}, tag-name=${tag.getName()})}"
+                                  method="post" class="d-inline">
+                                <button type="submit" class="btn btn-sm btn-link text-danger p-0 ms-1" style="line-height: 1;">
+                                    &times;
+                                </button>
+                            </form>
+                        </span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Bottom Section: Reply + Like/Dislike Buttons -->
+            <div class="d-flex justify-content-between align-items-center mt-3 pt-3">
+                <!-- Reply Button -->
                 <div class="d-flex justify-content-end">
                     <button th:if="${session.user != null}"
-                            class="btn btn-info btn-sm m-2 reply-button"
+                            class="btn btn-info btn-sm reply-button"
                             th:attr="data-reply-id=${topic.getId()}">Reply
                     </button>
                 </div>
-                <div th:attr="data-reply-id=${topic.getId()}" class="card-body d-none reply-body">
-                    <form th:action="@{/topics/{topic-id}/discussions/add(topic-id=${topic.getId()})}"
-                          method="post">
-                        <div class="mb-3">
-                            <label class="form-label">Your Reply</label>
-                            <textarea name="content" class="form-control" rows="3" placeholder="Write your reply here"
-                                      required></textarea>
-                        </div>
-                        <div class="d-flex justify-content-between">
-                            <input type="hidden" th:value="${topic.getId()}" name="parentId">
-                            <button type="submit" class="btn btn-success w-10 ms-2">Post Reply</button>
-                            <div class="d-flex justify-content-end reply-cancel">
-                                <button class="btn btn-danger btn-sm reply-cancel w-10 me-2"
-                                        th:attr="data-reply-id=${topic.getId()}">Cancel
-                                </button>
-                            </div>
-                        </div>
-                        <input type="hidden" th:if="${session.user!=null}" name="username"
-                               th:value="${session.user.username}">
-                    </form>
-                </div>
-            </div>
-            <div class="d-flex justify-content-between align-items-center mt-3 pt-3">
+
+                <!-- Like & Dislike Buttons -->
                 <div class="d-flex flex-row">
                     <form th:action="@{/threads/{thread-id}/like(thread-id=${topic.getId()})}" method="post">
@@ -106,5 +94,4 @@
                         <button th:if="${session.user!=null}"
                                 type="submit" class="btn btn-outline-success btn-sm me-2 like-button">
-                            <!--                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">-->
                             👍 Like (<span th:text="${topic.getNumLikes()}">0</span>)
                         </button>
@@ -114,5 +101,4 @@
                         <button th:if="${session.user!=null}"
                                 class="btn btn-outline-danger btn-sm dislike-button">
-                            <!--                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">-->
                             👎 Dislike
                         </button>
@@ -120,8 +106,8 @@
                 </div>
             </div>
-
-
-        </div>
-        <!-- Edit and Delete Buttons for Topic -->
+        </div>
+    </div>
+
+    <!-- Edit and Delete Buttons for Topic -->
         <div th:if="${session.user != null && session.user.getId() == topic.getUser().getId()}"
              class="card-footer d-flex justify-content-between">