Index: docs/todo.txt
===================================================================
--- docs/todo.txt	(revision 72b7d6cd23a8d13574be1a0c05e232c5c7c83efc)
+++ docs/todo.txt	(revision 4945bed9aa80ddc0b25965359c2643627bc4411e)
@@ -32,4 +32,10 @@
 ---------------
 - timestamp da sa prikazvit za discussion threads, koga sa postaveni
+- poraka impl crud
+- vo kanal page da sa prikazvat avatarite na users, koga bila pustena poraka
+- levo da ti gi prikazvit site kanali
+- link do proektot nazad
+- to so referenciranje da go napreme
+- 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)
 
 
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 72b7d6cd23a8d13574be1a0c05e232c5c7c83efc)
+++ src/main/java/com/db/finki/www/build_board/controller/channels/ChannelController.java	(revision 4945bed9aa80ddc0b25965359c2643627bc4411e)
@@ -57,7 +57,7 @@
     @PreAuthorize("#project.getDevelopers().contains(#user)")
     @PostMapping("/add")
-    public String add(@PathVariable("title") @P("project") Project project, String channelName, String description, @SessionAttribute @P("user") BBUser user, RedirectAttributes redirectAttributes) {
+    public String add(@PathVariable("title") @P("project") Project project, @RequestParam String channelName, @RequestParam String channelDescription, @SessionAttribute @P("user") BBUser user, RedirectAttributes redirectAttributes) {
         try {
-            Channel channel = channelService.create(project, channelName, description, user);
+            Channel channel = channelService.create(project, channelName, channelDescription, user);
             redirectAttributes.addFlashAttribute("channel", channel);
         } catch (Exception e) {
Index: src/main/resources/templates/channels/view-channel.html
===================================================================
--- src/main/resources/templates/channels/view-channel.html	(revision 72b7d6cd23a8d13574be1a0c05e232c5c7c83efc)
+++ src/main/resources/templates/channels/view-channel.html	(revision 4945bed9aa80ddc0b25965359c2643627bc4411e)
@@ -3,12 +3,157 @@
 <head>
     <meta charset="UTF-8">
-    <title>Channel</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern Channel Chat</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>
 </head>
-<body>
-<h1 th:text="${channel.getName()}"></h1>
-<form th:action="@{/project/{projectTitle}/channels/{channelName}/delete (projectTitle=${channel.getProject().getTitle()},channelName=${channel.getName()})}" method="post">
-    <button type="submit"> Delete</button>
-</form>
+<body class="d-flex justify-content-center align-items-center vh-100">
 
+<div class="container chat-container bg-white">
+    <!-- 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">
+            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
+        </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>
+
+<!-- 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>
+<script>
+    document.querySelector('.btn-primary').addEventListener('click', () => {
+        const input = document.querySelector('.form-control');
+        const messageText = input.value.trim();
+        if (messageText) {
+            const messagesContainer = document.querySelector('.chat-messages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message-bubble outgoing';
+            messageDiv.textContent = messageText;
+            messagesContainer.appendChild(messageDiv);
+            input.value = '';
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+    });
+</script>
 </body>
 </html>
