Index: docs/todo.txt
===================================================================
--- docs/todo.txt	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ docs/todo.txt	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -39,3 +39,22 @@
 - view channels page da sa napret, imas ideja toska ke ti teknit to so chatojte ko preview da sa. (ova samo za mene e viktor uzivaj)
 
+------------
 
+PRAVILA ZA SINTAKSA
+- packages ednina
+- url mnozina
+- edinecen resurs ko ke pristapvis od nekoj resurs so e vo mnozina primer nekoj kanal go pristapvis so channels/kanalot
+- kebap case url
+- metodi vo services
+    - prefix get vo service,vo repo find -> za metodi so zemas nesto od baza
+    - create za kreiranje novi obj
+    - Najcesti zborcinja za koristenje: get, create,update,delete
+
+- Optionals vo repo ponatamu
+
+- Controllers
+    - get mapping so vrakjat page -> get<Ime na html page>Page
+
+
+
+
Index: src/main/java/com/db/finki/www/build_board/controller/channels/ChannelController.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/controller/channels/ChannelController.java	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/java/com/db/finki/www/build_board/controller/channels/ChannelController.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -4,5 +4,7 @@
 import com.db.finki.www.build_board.entity.threads.Project;
 import com.db.finki.www.build_board.entity.user_types.BBUser;
+import com.db.finki.www.build_board.mappers.MessageMapper;
 import com.db.finki.www.build_board.service.channel.ChannelService;
+import com.db.finki.www.build_board.service.channel.MessageService;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.security.core.parameters.P;
@@ -18,7 +20,11 @@
 public class ChannelController {
     private final ChannelService channelService;
+    private final MessageMapper messageMapper;
+    private final MessageService messageService;
 
-    public ChannelController(ChannelService channelService) {
+    public ChannelController(ChannelService channelService, MessageMapper messageMapper, MessageService messageService) {
         this.channelService = channelService;
+        this.messageMapper = messageMapper;
+        this.messageService = messageService;
     }
 
@@ -40,4 +46,5 @@
             c = channelService.getByNameAndProject(channelName, project);
             model.addAttribute("channel", c);
+            model.addAttribute("messages",messageMapper.toDTO(messageService.getAllMessagesForProjectChannel(project.getId(),channelName)));
         } else {
             model.addAttribute("channel", c);
Index: src/main/java/com/db/finki/www/build_board/dto/channel/MessageDTO.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/dto/channel/MessageDTO.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/java/com/db/finki/www/build_board/dto/channel/MessageDTO.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,23 @@
+package com.db.finki.www.build_board.dto.channel;
+
+import com.db.finki.www.build_board.entity.channels.Message;
+import com.db.finki.www.build_board.mappers.DTO;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+public class MessageDTO {
+    private String channelName;
+    private String content;
+    private String senderUsername;
+    private LocalDateTime sentAt;
+    private Integer projectId;
+    private String avatarUrl;
+}
Index: src/main/java/com/db/finki/www/build_board/entity/channels/Message.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/channels/Message.java	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/java/com/db/finki/www/build_board/entity/channels/Message.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -5,4 +5,5 @@
 import com.db.finki.www.build_board.entity.user_types.Developer;
 import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
@@ -17,4 +18,5 @@
 @NoArgsConstructor
 @IdClass(MessageId.class)
+@AllArgsConstructor
 public class Message {
     @Id
Index: src/main/java/com/db/finki/www/build_board/entity/threads/Project.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/threads/Project.java	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/java/com/db/finki/www/build_board/entity/threads/Project.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -46,5 +46,5 @@
             inverseJoinColumns = @JoinColumn(name = "developer_id")
     )
-    private Set<BBUser> developers = new HashSet<>();
+    private Set<BBUser> developers = new HashSet<>(); // vaj dis
 
     @OneToMany(mappedBy = "project")
Index: src/main/java/com/db/finki/www/build_board/mappers/DTO.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/mappers/DTO.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/java/com/db/finki/www/build_board/mappers/DTO.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,5 @@
+package com.db.finki.www.build_board.mappers;
+
+public interface DTO<T> {
+
+}
Index: src/main/java/com/db/finki/www/build_board/mappers/Mapper.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/mappers/Mapper.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/java/com/db/finki/www/build_board/mappers/Mapper.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,12 @@
+package com.db.finki.www.build_board.mappers;
+
+import java.util.List;
+
+
+public interface Mapper<T,S> {
+    S toDTO(T entity);
+    List<S> toDTO(List<T> entities);
+
+    T fromDTO(S dto);
+    List<T> fromDTO(List<S> dtos);
+}
Index: src/main/java/com/db/finki/www/build_board/mappers/MessageMapper.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/mappers/MessageMapper.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/java/com/db/finki/www/build_board/mappers/MessageMapper.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,47 @@
+package com.db.finki.www.build_board.mappers;
+
+import com.db.finki.www.build_board.dto.channel.MessageDTO;
+import com.db.finki.www.build_board.entity.channels.Message;
+import com.db.finki.www.build_board.entity.threads.Project;
+import com.db.finki.www.build_board.entity.user_types.Developer;
+import com.db.finki.www.build_board.repository.DeveloperRepository;
+import com.db.finki.www.build_board.repository.UserRepository;
+import com.db.finki.www.build_board.repository.thread.ProjectRepository;
+import com.db.finki.www.build_board.service.thread.impl.ProjectService;
+import org.springframework.stereotype.Component;
+
+import java.util.List;
+
+@Component
+public class MessageMapper implements Mapper<Message,MessageDTO>{
+
+    private final ProjectService projectService;
+    private final DeveloperRepository developerRepository;
+
+    public MessageMapper(ProjectService projectService, DeveloperRepository developerRepository) {
+        this.projectService = projectService;
+        this.developerRepository = developerRepository;
+    }
+
+    @Override
+    public MessageDTO toDTO(Message message) {
+        return new MessageDTO(message.getName(),message.getContent(),message.getSentBy().getUsername(),message.getSentAt(),message.getProject().getId(),message.getSentBy().getAvatarUrl());
+    }
+
+    @Override
+    public List<MessageDTO> toDTO(List<Message> messages) {
+        return messages.stream().map(this::toDTO).toList();
+    }
+
+    @Override
+    public Message fromDTO(MessageDTO dto) {
+        Developer d =  developerRepository.findByUsername(dto.getSenderUsername());
+        Project p =  projectService.findById((long)dto.getProjectId());
+        return new Message(dto.getChannelName(),p,d,dto.getSentAt(), dto.getContent());
+    }
+
+    @Override
+    public List<Message> fromDTO(List<MessageDTO> dtos) {
+        return dtos.stream().map(this::fromDTO).toList();
+    }
+}
Index: src/main/java/com/db/finki/www/build_board/repository/DeveloperRepository.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/repository/DeveloperRepository.java	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/java/com/db/finki/www/build_board/repository/DeveloperRepository.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -8,3 +8,4 @@
 public interface DeveloperRepository extends JpaRepository<Developer, Integer> {
     Developer findById(int id);
+    Developer findByUsername(String username);
 }
Index: src/main/java/com/db/finki/www/build_board/repository/channel/MessageRepository.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/repository/channel/MessageRepository.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/java/com/db/finki/www/build_board/repository/channel/MessageRepository.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,13 @@
+package com.db.finki.www.build_board.repository.channel;
+
+import com.db.finki.www.build_board.entity.channels.Message;
+import com.db.finki.www.build_board.entity.compositeId.MessageId;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public interface MessageRepository extends JpaRepository<Message, MessageId> {
+    List<Message> findAllByNameAndProjectIdOrderBySentAtDesc(String channelName, Integer projectId);
+}
Index: src/main/java/com/db/finki/www/build_board/service/channel/MessageService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/channel/MessageService.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/java/com/db/finki/www/build_board/service/channel/MessageService.java	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,22 @@
+package com.db.finki.www.build_board.service.channel;
+
+import com.db.finki.www.build_board.dto.channel.MessageDTO;
+import com.db.finki.www.build_board.entity.channels.Message;
+import com.db.finki.www.build_board.mappers.MessageMapper;
+import com.db.finki.www.build_board.repository.channel.MessageRepository;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class MessageService {
+    private final MessageRepository messageRepository;
+    public MessageService(MessageRepository messageRepository) {
+        this.messageRepository = messageRepository;
+    }
+
+    public List<Message> getAllMessagesForProjectChannel(Integer projectId,String channelName) {
+        return messageRepository.findAllByNameAndProjectIdOrderBySentAtDesc(channelName,projectId);
+    }
+
+}
Index: src/main/resources/db/migration/V2__add_test_data.sql
===================================================================
--- src/main/resources/db/migration/V2__add_test_data.sql	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/resources/db/migration/V2__add_test_data.sql	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -94,8 +94,4 @@
     ('Delete Thread', 'Admin', 5);
 
-INSERT INTO project_request (description, status, user_id, project_id)
-VALUES
-    ('Request to join Project 1', 'PENDING', 2, 5),
-    ('Request to join Project 1', 'ACCEPTED', 4, 5);
 
 INSERT INTO report (created_at, description, status, thread_id, for_user_id, by_user_id)
Index: src/main/resources/static/css/chat.css
===================================================================
--- src/main/resources/static/css/chat.css	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/resources/static/css/chat.css	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,113 @@
+body {
+    background-color: #f8f9fa;
+    margin: 0;
+    padding: 0;
+}
+.chat-container {
+    width: 80%; /* Chat takes 80% of the screen width */
+    height: 85vh; /* Chat box height takes up 85% of the viewport */
+    max-width: 1200px; /* Max-width for large screens */
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 1px 4px 12px rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0;
+}
+.chat-header {
+    background-color: #e9ecef;
+    padding: 25px;
+    text-align: center;
+}
+.chat-header h3{
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+}
+.chat-messages {
+    background-color: #e9ecef;
+    height: calc(100% - 160px); /* Adjust the height based on header and input section */
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.message-bubble {
+    width: 100%;
+    word-wrap: break-word;
+    padding: 12px 20px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+.message-info p{
+    margin: 0;
+}
+.message-bubble.outgoing {
+    background-color: #007bff;
+    color: white;
+    align-self: flex-end;
+}
+.message-bubble.incoming {
+    background-color: #e2e5ea;
+    color: black;
+    align-self: flex-start;
+}
+.input-container {
+    background-color: #f1f3f5;
+    padding: 15px;
+    display: flex;
+    gap: 10px;
+}
+.user-list {
+    background-color: #f1f3f5;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    max-height: 40vh;
+    overflow-y: auto;
+}
+.channel-list {
+    background-color: #f1f3f5;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 2px 4px 8px rgba(3, 2, 2, 0.27);
+    width: 20%;
+    overflow-y: auto;
+}
+.user-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 8px;
+    border-radius: 8px;
+}
+.user-item:hover {
+    background-color: #e9ecef;
+}
+
+.channel-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 8px;
+    border-radius: 8px;
+    background-color: rgba(108, 111, 114, 0.07);
+    margin-top: 0.85rem;
+}
+.channel-item:hover {
+    transition: background-color 300ms;
+    background-color: rgba(129, 144, 178, 0.29);
+}
+
+.avatar {
+    width: 50px;
+    height: 50px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: white;
+}
Index: src/main/resources/static/css/icon.css
===================================================================
--- src/main/resources/static/css/icon.css	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/resources/static/css/icon.css	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -1,5 +1,5 @@
 .icon-small{
-    width: 3rem;
-    height: 3rem;
+    width: 3rem !important;
+    height: 3rem !important;
     object-fit: cover;
     vertical-align: middle;
Index: src/main/resources/templates/channels/view-channel.html
===================================================================
--- src/main/resources/templates/channels/view-channel.html	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/resources/templates/channels/view-channel.html	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -4,139 +4,78 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Modern Channel Chat</title>
+    <title>Channel</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        body {
-            background-color: #f8f9fa;
-            margin: 0;
-            padding: 0;
-        }
-        .chat-container {
-            width: 80%; /* Chat takes 80% of the screen width */
-            height: 85vh; /* Chat box height takes up 85% of the viewport */
-            max-width: 1200px; /* Max-width for large screens */
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            margin-right: 250px; /* Make space for user list */
-        }
-        .chat-header {
-            background-color: #007bff;
-            color: white;
-            padding: 25px;
-            text-align: center;
-        }
-        .chat-messages {
-            background-color: #ffffff;
-            height: calc(100% - 160px); /* Adjust the height based on header and input section */
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-        .message-bubble {
-            max-width: 70%;
-            word-wrap: break-word;
-            padding: 12px 20px;
-            border-radius: 20px;
-        }
-        .message-bubble.outgoing {
-            background-color: #007bff;
-            color: white;
-            align-self: flex-end;
-        }
-        .message-bubble.incoming {
-            background-color: #e9ecef;
-            color: black;
-            align-self: flex-start;
-        }
-        .input-container {
-            background-color: #f1f3f5;
-            padding: 15px;
-            display: flex;
-            gap: 10px;
-        }
-        .user-list {
-            background-color: #f1f3f5;
-            padding: 15px;
-            border-radius: 8px;
-            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-            max-height: 90vh;
-            overflow-y: auto;
-        }
-        .user-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 12px 8px;
-            border-radius: 8px;
-        }
-        .user-item:hover {
-            background-color: #e9ecef;
-        }
-        .avatar {
-            width: 50px;
-            height: 50px;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 50%;
-            color: white;
-        }
-    </style>
+    <link href="/static/css/icon.css" rel="stylesheet">
+    <link href="/css/chat.css" rel="stylesheet">
 </head>
-<body class="d-flex justify-content-center align-items-center vh-100">
+<body>
 
-<div class="container chat-container bg-white">
-    <!-- Header -->
-    <div class="chat-header">
-        <h3 class="mb-0" th:text="${channel.getName()}">Channel Name</h3>
+<div th:replace="~{/home_pages/home ::navigation}"></div>
+
+<main class="d-flex justify-content-between align-items-start vh-90 mt-5">
+
+    <div class="d-flex gap-1 flex-grow-1 h-100">
+        <!-- Channel List -->
+        <div class="channel-list border border-outline">
+            <h5 th:text="${channel.getProject().getTitle()}"></h5>
+            <hr>
+            <h6>Channels</h6>
+            <div th:each="channel : ${channel.getProject().getChannels()}" class="channel-item">
+                <a th:href="@{/project/{projectName}/channels/{channelName} (projectName=${channel.getProject().getTitle()}, channelName=${channel.getName()})}"
+                   th:text="${channel.getName()}"
+                   class="nav-link"
+                >Channel Name</a>
+            </div>
+        </div>
+
+        <div class="container chat-container">
+            <!-- Header -->
+            <div class="chat-header">
+                <h3 class="mb-0" th:text="${channel.getName()}">Channel Name</h3>
+            </div>
+
+            <!-- Main Content (Messages Section) -->
+            <div class="chat-messages">
+                <!-- Example Messages -->
+                <div class="message-bubble incoming" th:each="message : ${messages}">
+                    <div id="user-info">
+                        <img th:src="${message.getAvatarUrl()}" class="rounded-circle icon-small" alt="user-logo"
+                        style="width: 3rem;height: 3rem;">
+                    </div>
+                    <div id="message-info" class="message-info">
+                        <small class="text-secondary fst-italic">
+                            <span th:text="${message.getSenderUsername()}">Username</span>
+                            <span th:text="${#temporals.format(message.getSentAt(), 'dd/MM/yyyy &bull; HH:mm')}">&nbsp;datum • vreme</span>
+                        </small>
+                        <p th:text="${message.getContent()}" class="lead text-break">Message Content</p>
+                    </div>
+
+                </div>
+<!--                Tuka pocvat messages-->
+
+            </div>
+
+            <!-- Input Section -->
+            <div class="input-container">
+                <textarea class="form-control h-fit-content" name="chatMessage" placeholder="Type your message..."></textarea>
+                <button class="btn btn-primary">Send</button>
+            </div>
+        </div>
+
     </div>
 
-    <!-- Main Content (Messages Section) -->
-    <div class="chat-messages">
-        <!-- Example Messages -->
-        <div class="message-bubble incoming">
-            Zdravo tokmaci
-        </div>
-        <div class="message-bubble outgoing">
-            Majka ti e tokmak
-        </div>
-        <div class="message-bubble incoming">
-           Ajde da ne sa karame drugari sme plus majka ti super zenicka e
+    <!-- User List -->
+    <div class="user-list me-3 border border-outline shadow">
+        <h5 style="text-align: center">Users</h5>
+        <hr>
+        <div th:each="developer : ${channel.getProject().getDevelopers()}" class="user-item">
+            <img th:src="${developer.getAvatarUrl()}" class="rounded-circle icon-small" alt="user-logo"
+                 style="width: 3rem;height: 3rem;">
+            <span class="text-break" th:text="${developer.getUsername()}"></span>
         </div>
     </div>
 
-    <!-- Input Section -->
-    <div class="input-container">
-        <input type="text" class="form-control" placeholder="Type your message..." />
-        <button class="btn btn-primary">Send</button>
-    </div>
-</div>
+</main>
 
-<!-- User List -->
-<div class="user-list me-3 border border-outline shadow">
-    <h5>Users</h5>
-    <div class="user-item">
-        <div class="avatar bg-primary">A</div>
-        <span>Alex</span>
-    </div>
-    <div class="user-item">
-        <div class="avatar bg-success">B</div>
-        <span>Brenda</span>
-    </div>
-    <div class="user-item">
-        <div class="avatar bg-warning">C</div>
-        <span>Charlie</span>
-    </div>
-    <div class="user-item">
-        <div class="avatar bg-warning">C</div>
-        <span>Mike</span>
-    </div>
-</div>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Index: src/main/resources/templates/fragments/chat_message.html
===================================================================
--- src/main/resources/templates/fragments/chat_message.html	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
+++ src/main/resources/templates/fragments/chat_message.html	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+
+</body>
+</html>
Index: src/main/resources/templates/project_pages/show-project.html
===================================================================
--- src/main/resources/templates/project_pages/show-project.html	(revision 46f6dc44cf4c349eb87a4d34ed98765d32f8a17b)
+++ src/main/resources/templates/project_pages/show-project.html	(revision 6ee72fa49804187c22d069f1a3c5bf5f3c0336a1)
@@ -71,5 +71,5 @@
             </div>
             <div class="d-flex flex-row justify-content-between">
-                <div th:if="${!project.getTopics().isEmpty()}" class="w-75 d-flex flex-column align-items-center">
+                <div th:if="${!project.getTopics().isEmpty()}" class="w-75 d-flex flex-column align-items-center mx-auto">
                     <h4>Topics:</h4>
                     <div class="list-group w-75">