Index: src/main/java/com/db/finki/www/build_board/controller/HomePageController.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/controller/HomePageController.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/java/com/db/finki/www/build_board/controller/HomePageController.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -1,5 +1,5 @@
 package com.db.finki.www.build_board.controller;
 
-import com.db.finki.www.build_board.service.threads.NamedThreadService;
+import com.db.finki.www.build_board.service.threads.impl.NamedThreadService;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
Index: src/main/java/com/db/finki/www/build_board/controller/TopicController.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/controller/TopicController.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/java/com/db/finki/www/build_board/controller/TopicController.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -2,7 +2,10 @@
 
 import com.db.finki.www.build_board.entity.BBUser;
-import com.db.finki.www.build_board.service.threads.TopicService;
+import com.db.finki.www.build_board.entity.threads.Topic;
+import com.db.finki.www.build_board.service.threads.itfs.TagService;
+import com.db.finki.www.build_board.service.threads.itfs.TopicService;
 import jakarta.servlet.http.HttpSession;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
 
@@ -12,7 +15,9 @@
 
     private final TopicService topicService;
+    private final TagService tagService;
 
-    public TopicController(TopicService topicService) {
+    public TopicController(TopicService topicService, TagService tagService) {
         this.topicService = topicService;
+        this.tagService = tagService;
     }
 
@@ -22,5 +27,8 @@
     }
     @GetMapping("/{topic-name}")
-    public String showTopic(@PathVariable(name = "topic-name") String topicName) {
+    public String showTopic(@PathVariable(name = "topic-name") String topicName, Model model) {
+        Topic t = topicService.getByTitle(topicName);
+        model.addAttribute("topic", t);
+        model.addAttribute("tags", tagService.findAll().stream().filter(tag -> !t.getTags().contains(tag)));
         return "show-topic";
     }
@@ -31,3 +39,18 @@
         return "redirect:/";
     }
+    @PostMapping("/delete/{id}")
+    public String deleteTopic(@PathVariable(name = "id") long id, HttpSession session) {
+        topicService.deleteTopicById(id);
+        return "redirect:/";
+    }
+    @PostMapping("/add-tag/{id}")
+    public String addTag(@PathVariable(name = "id") long id,
+                         @RequestParam String tagName,
+                         HttpSession session,
+                         Model model) {
+        Topic t = topicService.getById(id);
+        topicService.addTagToTopic(t,tagName);
+        model.addAttribute("topic", t);
+        return "redirect:/topic/" + t.getTitle();
+    }
 }
Index: src/main/java/com/db/finki/www/build_board/entity/BBUser.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/BBUser.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/java/com/db/finki/www/build_board/entity/BBUser.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -51,3 +51,23 @@
     }
 
+
+    public int getId() {
+        return id;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public LocalDateTime getRegisteredAt() {
+        return registeredAt;
+    }
+
+    public String getSex() {
+        return sex;
+    }
+
+    public List<BBThread> getThreads() {
+        return threads;
+    }
 }
Index: src/main/java/com/db/finki/www/build_board/entity/threads/BBThread.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/threads/BBThread.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/java/com/db/finki/www/build_board/entity/threads/BBThread.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -7,4 +7,5 @@
 import lombok.Setter;
 
+import java.util.ArrayList;
 import java.util.List;
 
@@ -32,5 +33,5 @@
             inverseJoinColumns = @JoinColumn(name = "tag_name")
     )
-    protected List<Tag> tags;
+    protected List<Tag> tags = new ArrayList<>();
 
     public Integer getId() {return id;}
@@ -47,3 +48,15 @@
         this.user = user;
     }
+
+    public String getContent() {
+        return content;
+    }
+
+    public BBUser getUser() {
+        return user;
+    }
+
+    public List<Tag> getTags() {
+        return tags;
+    }
 }
Index: src/main/java/com/db/finki/www/build_board/entity/threads/Tag.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/threads/Tag.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/java/com/db/finki/www/build_board/entity/threads/Tag.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -5,5 +5,7 @@
 import jakarta.persistence.ManyToMany;
 import jakarta.persistence.Table;
+import lombok.Data;
 
+import java.util.ArrayList;
 import java.util.List;
 
@@ -14,5 +16,19 @@
     String name;
 
+
+    public Tag(String name) {
+        this.name = name;
+    }
+    public Tag(){}
+
+    public List<BBThread> getThreads() {
+        return threads;
+    }
+
+    public String getName() {
+        return name;
+    }
+
     @ManyToMany(mappedBy = "tags")
-    private List<BBThread> threads;
+    private List<BBThread> threads = new ArrayList<>();
 }
Index: src/main/java/com/db/finki/www/build_board/repository/threads/TagRepository.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/repository/threads/TagRepository.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
+++ src/main/java/com/db/finki/www/build_board/repository/threads/TagRepository.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -0,0 +1,12 @@
+package com.db.finki.www.build_board.repository.threads;
+
+import com.db.finki.www.build_board.entity.threads.Tag;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.Optional;
+
+@Repository
+public interface TagRepository extends JpaRepository<Tag, Long> {
+    Optional<Tag> findByName(String name);
+}
Index: src/main/java/com/db/finki/www/build_board/repository/threads/TopicRepository.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/repository/threads/TopicRepository.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/java/com/db/finki/www/build_board/repository/threads/TopicRepository.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -7,3 +7,6 @@
 @Repository
 public interface TopicRepository extends JpaRepository<Topic,Long> {
+    Topic findByTitle(String title);
+    void deleteByTitle(String title);
+    Topic findById(long id);
 }
Index: c/main/java/com/db/finki/www/build_board/service/threads/NamedThreadService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/NamedThreadService.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ 	(revision )
@@ -1,24 +1,0 @@
-package com.db.finki.www.build_board.service.threads;
-
-import com.db.finki.www.build_board.entity.threads.interfaces.NamedThread;
-import org.springframework.stereotype.Service;
-
-import java.util.Collections;
-import java.util.List;
-
-@Service
-public class NamedThreadService {
-    //TODO: Add project support also
-     private final TopicServiceImpl topicsService;
-
-    public NamedThreadService(TopicServiceImpl topicsService) {
-        this.topicsService = topicsService;
-    }
-
-    public List<NamedThread> findAll(){
-        List<NamedThread> results = (List<NamedThread>) (List<?>) topicsService.getAll();
-
-        Collections.shuffle(results);
-        return results;
-    }
-}
Index: c/main/java/com/db/finki/www/build_board/service/threads/TopicService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/TopicService.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ 	(revision )
@@ -1,11 +1,0 @@
-package com.db.finki.www.build_board.service.threads;
-
-import com.db.finki.www.build_board.entity.BBUser;
-import com.db.finki.www.build_board.entity.threads.Topic;
-
-import java.util.List;
-
-public interface TopicService {
-    void create(String title, String description, BBUser user);
-    List<Topic> getAll();
-}
Index: c/main/java/com/db/finki/www/build_board/service/threads/TopicServiceImpl.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/TopicServiceImpl.java	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ 	(revision )
@@ -1,32 +1,0 @@
-package com.db.finki.www.build_board.service.threads;
-
-import com.db.finki.www.build_board.entity.BBUser;
-import com.db.finki.www.build_board.entity.threads.Topic;
-import com.db.finki.www.build_board.repository.threads.TopicRepository;
-import org.springframework.stereotype.Service;
-
-import java.util.List;
-
-@Service
-public class TopicServiceImpl implements TopicService {
-    private final TopicRepository topicRepository;
-
-    public TopicServiceImpl(TopicRepository topicRepository) {
-        this.topicRepository = topicRepository;
-    }
-
-
-    @Override
-    public void create(String title, String description, BBUser user) {
-        Topic topic = new Topic();
-        topic.setTitle(title);
-        topic.setContent(description);
-        topic.setUser(user);
-        topicRepository.save(topic);
-    }
-
-    @Override
-    public List<Topic> getAll() {
-        return topicRepository.findAll();
-    }
-}
Index: src/main/java/com/db/finki/www/build_board/service/threads/impl/NamedThreadService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/impl/NamedThreadService.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
+++ src/main/java/com/db/finki/www/build_board/service/threads/impl/NamedThreadService.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -0,0 +1,24 @@
+package com.db.finki.www.build_board.service.threads.impl;
+
+import com.db.finki.www.build_board.entity.threads.interfaces.NamedThread;
+import org.springframework.stereotype.Service;
+
+import java.util.Collections;
+import java.util.List;
+
+@Service
+public class NamedThreadService {
+    //TODO: Add project support also
+     private final TopicServiceImpl topicsService;
+
+    public NamedThreadService(TopicServiceImpl topicsService) {
+        this.topicsService = topicsService;
+    }
+
+    public List<NamedThread> findAll(){
+        List<NamedThread> results = (List<NamedThread>) (List<?>) topicsService.getAll();
+
+        Collections.shuffle(results);
+        return results;
+    }
+}
Index: src/main/java/com/db/finki/www/build_board/service/threads/impl/TagServiceImpl.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/impl/TagServiceImpl.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
+++ src/main/java/com/db/finki/www/build_board/service/threads/impl/TagServiceImpl.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -0,0 +1,27 @@
+package com.db.finki.www.build_board.service.threads.impl;
+
+import com.db.finki.www.build_board.entity.threads.Tag;
+import com.db.finki.www.build_board.repository.threads.TagRepository;
+import com.db.finki.www.build_board.service.threads.itfs.TagService;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class TagServiceImpl implements TagService {
+    private final TagRepository tagRepository;
+
+    public TagServiceImpl(TagRepository tagRepository) {
+        this.tagRepository = tagRepository;
+    }
+
+    @Override
+    public Tag findByName(String name) {
+        return tagRepository.findByName(name).orElseThrow(() -> new IllegalArgumentException("Tag not found"));
+    }
+
+    @Override
+    public List<Tag> findAll() {
+        return tagRepository.findAll();
+    }
+}
Index: src/main/java/com/db/finki/www/build_board/service/threads/impl/TopicServiceImpl.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/impl/TopicServiceImpl.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
+++ src/main/java/com/db/finki/www/build_board/service/threads/impl/TopicServiceImpl.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -0,0 +1,75 @@
+package com.db.finki.www.build_board.service.threads.impl;
+
+import com.db.finki.www.build_board.entity.BBUser;
+import com.db.finki.www.build_board.entity.threads.Tag;
+import com.db.finki.www.build_board.entity.threads.Topic;
+import com.db.finki.www.build_board.repository.threads.TagRepository;
+import com.db.finki.www.build_board.repository.threads.TopicRepository;
+import com.db.finki.www.build_board.service.threads.itfs.TopicService;
+import jakarta.transaction.Transactional;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class TopicServiceImpl implements TopicService {
+    private final TopicRepository topicRepository;
+    private final TagRepository tagRepository;
+
+    public TopicServiceImpl(TopicRepository topicRepository, TagRepository tagRepository) {
+        this.topicRepository = topicRepository;
+        this.tagRepository = tagRepository;
+    }
+
+
+    @Override
+    public void create(String title, String description, BBUser user) {
+        Topic topic = new Topic();
+        topic.setTitle(title);
+        topic.setContent(description);
+        topic.setUser(user);
+        topicRepository.save(topic);
+    }
+
+    @Override
+    public List<Topic> getAll() {
+        return topicRepository.findAll();
+    }
+
+    @Override
+    public Topic getByTitle(String title) {
+        return topicRepository.findByTitle(title);
+    }
+
+    @Override
+    public void deleteTopicById(Long id) {
+        topicRepository.deleteById(id);
+    }
+
+    @Override
+    public void deleteTopicByTitle(String title) {
+        topicRepository.deleteByTitle(title);
+    }
+
+    @Override
+    public Topic getById(Long id) {
+        return topicRepository.findById(id).orElse(null);
+    }
+
+    @Override
+    @Transactional
+    public void addTagToTopic(Topic topic, String tagName) {
+        tagRepository.findByName(tagName).ifPresentOrElse(tag -> {
+            topic.getTags().add(tag);
+            tag.getThreads().add(topic);
+            topicRepository.save(topic);
+            tagRepository.save(tag);
+        },() -> {
+            Tag tag = new Tag(tagName);
+            tagRepository.save(tag);
+            topic.getTags().add(tag);
+            tag.getThreads().add(topic);
+            topicRepository.save(topic);
+        });
+    }
+}
Index: src/main/java/com/db/finki/www/build_board/service/threads/itfs/TagService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/itfs/TagService.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
+++ src/main/java/com/db/finki/www/build_board/service/threads/itfs/TagService.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -0,0 +1,11 @@
+package com.db.finki.www.build_board.service.threads.itfs;
+
+import com.db.finki.www.build_board.entity.threads.Tag;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+public interface TagService {
+    Tag findByName(String name);
+    List<Tag> findAll();
+}
Index: src/main/java/com/db/finki/www/build_board/service/threads/itfs/TopicService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/threads/itfs/TopicService.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
+++ src/main/java/com/db/finki/www/build_board/service/threads/itfs/TopicService.java	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -0,0 +1,16 @@
+package com.db.finki.www.build_board.service.threads.itfs;
+
+import com.db.finki.www.build_board.entity.BBUser;
+import com.db.finki.www.build_board.entity.threads.Topic;
+
+import java.util.List;
+public interface TopicService {
+    void create(String title, String description, BBUser user);
+    List<Topic> getAll();
+    Topic getByTitle(String title);
+    void deleteTopicById(Long id);
+    void deleteTopicByTitle(String title);
+    Topic getById(Long id);
+
+    void addTagToTopic(Topic topic, String tagName);
+}
Index: src/main/resources/db/migration/V1__init_ddl.sql
===================================================================
--- src/main/resources/db/migration/V1__init_ddl.sql	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/resources/db/migration/V1__init_ddl.sql	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -41,4 +41,5 @@
 drop function if exists clean_routines CASCADE;
 DROP TRIGGER IF EXISTS validate_same_parent ON discussion_thread CASCADE;
+
 ---- DDL
 CREATE TABLE users
@@ -72,5 +73,5 @@
 CREATE TABLE topic_thread
 (
-    title           VARCHAR(32) NOT NULL,
+    title           VARCHAR(256) NOT NULL,
     guidelines      jsonb,
     parent_id INT REFERENCES thread (id),
@@ -79,10 +80,10 @@
 CREATE TABLE discussion_thread
 (
-    parent_id           INT REFERENCES thread (id) NOT NULL,
+    parent_id           INT REFERENCES thread (id) on delete cascade NOT NULL,
     id                  INT PRIMARY KEY REFERENCES thread (id) on delete cascade
 );
 CREATE TABLE project_thread
 (
-    title    VARCHAR(32) NOT NULL,
+    title    VARCHAR(256) NOT NULL,
     repo_url TEXT,
     id       INT PRIMARY KEY REFERENCES thread (id) on delete cascade
@@ -106,6 +107,6 @@
 CREATE TABLE tag_threads
 (
-    thread_id INT REFERENCES thread (id),
-    tag_name  VARCHAR(64) REFERENCES tag (name),
+    thread_id INT REFERENCES thread (id) ON DELETE CASCADE ,
+    tag_name  VARCHAR(64) REFERENCES tag (name) ON DELETE CASCADE,
     PRIMARY KEY (thread_id, tag_name)
 );
Index: src/main/resources/templates/create-topic.html
===================================================================
--- src/main/resources/templates/create-topic.html	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/resources/templates/create-topic.html	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -2,20 +2,33 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Title</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Add Topic</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 
-<main>
-  <form action="/topic/add" method="post">
-    <label>
-      Title <input type="text" name="title" required>
-    </label>
-    <label>
-      Description <input type="text" name="description" required>
-    </label>
-    <button type="submit">Submit</button>
-  </form>
+<main class="container mt-5">
+  <div class="card shadow-sm">
+    <div class="card-header bg-primary text-white">
+      <h4 class="mb-0">Add a New Topic</h4>
+    </div>
+    <div class="card-body">
+      <form action="/topic/add" method="post">
+        <div class="mb-3">
+          <label for="title" class="form-label">Title</label>
+          <input type="text" id="title" name="title" class="form-control" placeholder="Enter the topic title" required>
+        </div>
+        <div class="mb-3">
+          <label for="description" class="form-label">Description</label>
+          <textarea id="description" name="description" class="form-control" rows="3" placeholder="Write a short description" required></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary w-100">Submit</button>
+      </form>
+    </div>
+  </div>
 </main>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
Index: src/main/resources/templates/home.html
===================================================================
--- src/main/resources/templates/home.html	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/resources/templates/home.html	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -12,5 +12,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
     <div class="container">
-        <a class="navbar-brand" href="/">Forum App</a>
+        <a class="navbar-brand" href="/">BuildBoard</a>
         <div th:if="${session.user != null}" class="d-flex align-items-center">
             <span class="me-2" th:text="${session.user.getUsername()}">Username</span>
@@ -30,5 +30,5 @@
             <div class="d-flex w-100 justify-content-between">
                 <h5 class="mb-1">
-                    <a th:href="@{/{type}/{id} (type=${thread.getTypeName()},id=${thread.getId()})}"
+                    <a th:href="@{/{type}/{name} (type=${thread.getTypeName()},name=${thread.getTitle()})}"
                        th:text="${thread.getTitle()}" class="text-decoration-none"></a>
                 </h5>
Index: src/main/resources/templates/project.html
===================================================================
--- src/main/resources/templates/project.html	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/resources/templates/project.html	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -7,40 +7,44 @@
   <style>
     body {
-      background-color: #000d20; /* Dark background for the whole page */
+      background-color: #f8f9fa; /* Light background for the whole page */
     }
     .card {
-      background-color: #030e23; /* Darker blue shade for the cards */
-      border: 2px solid #262a2d; /* Light blue border */
-      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Adding depth with a stronger shadow */
+      background-color: #ffffff; /* White background for the cards */
+      border: 1px solid #dde2e6; /* Light grey border */
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       height: 350px; /* Fixed height for larger cards */
     }
     .card:hover {
-      transform: translateY(-10px); /* More prominent lift on hover */
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); /* Deeper shadow on hover */
+      transform: translateY(-5px); /* Slight lift on hover */
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
     }
     .card-header {
-      /*1a6e9c*/
-      background-color: #168f77; /* Green accent header color */
-      color: #000000;
+      background-color: #007bff; /* Blue header color */
+      color: #ffffff; /* White text */
+      font-weight: bold;
     }
     .card-body {
-      background-color: #00386e; /* Same blue as the card body */
-      color: #ffffff;
+      background-color: #f1f3f5; /* Light grey background */
+      color: #495057; /* Dark text */
       height: 200px; /* Larger height for the card body */
       overflow-y: auto; /* Allow scrolling if content exceeds height */
     }
     .card-footer {
-      background-color: #000d20;
-      color: #ffffff;
+      background-color: #f8f9fa;
+      color: #495057;
     }
     .card-title {
-      color: #e0e0e0;
+      color: #000000; /* Dark text color for card title */
     }
     .card-text {
-      color: #ffffff;
+      color: #6c757d; /* Grey text for descriptions */
     }
     .btn-link {
-      color: #53daa2; /* Green accent for buttons */
+      color: #007bff; /* Blue accent for buttons */
+    }
+    .container-header {
+      margin-top: 50px;
+      text-align: center;
     }
   </style>
@@ -48,10 +52,10 @@
 <body>
 
-<header class="container ms-4 mt-4">
-  <h1 class="text-light">Projects</h1>
-  <h2 class="text-muted ps-3 fs-5">View All Projects</h2>
+<header class="container container-header">
+  <h1 class="text-primary">Projects</h1>
+  <h2 class="text-muted">View All Projects</h2>
 </header>
 
-<div class="container w-100 pt-5">
+<div class="container pt-5">
   <!-- Card 1 -->
   <div class="card mb-4">
Index: src/main/resources/templates/show-topic.html
===================================================================
--- src/main/resources/templates/show-topic.html	(revision e27f1b322a71855c28c17e0082eb42c667e9ad2f)
+++ src/main/resources/templates/show-topic.html	(revision 99e241a452755bcce1157c3fa57a047f28f99d9d)
@@ -3,8 +3,112 @@
 <head>
     <meta charset="UTF-8">
-    <title>Topic</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title th:text="${topic.getTitle()}"></title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 
+<main class="container mt-5">
+    <!-- Topic Title and Description -->
+    <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="${topic.getTitle()}">Topic Title</h3>
+            <!-- Add Tag Button -->
+            <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#addTagModal">Add Tag</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" th:text="${tag.getName()}">Tag Name</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- Delete Topic Button -->
+        <div th:if="${session.user.getId() != null && session.user.getId() == topic.getUser().getId()}" class="card-footer d-flex justify-content-between">
+            <form th:action="@{/topic/delete/{id} (id=${topic.getId()})}" method="post" style="display:inline;">
+                <input type="hidden" name="id" th:value="${topic.getId()}" />
+                <button type="submit" class="btn btn-danger btn-sm">Delete Topic</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Reply Form -->
+    <div class="card shadow-sm">
+        <div class="card-header bg-success text-white">
+            <h5 class="mb-0">Add a Reply</h5>
+        </div>
+        <div class="card-body">
+            <form action="/topic/reply" method="post">
+                <div class="mb-3">
+                    <label for="reply" class="form-label">Your Reply</label>
+                    <textarea id="reply" name="reply" class="form-control" rows="3" placeholder="Write your reply here" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-success w-100">Post Reply</button>
+            </form>
+        </div>
+    </div>
+</main>
+
+<!-- Add Tag Modal -->
+<div class="modal fade" id="addTagModal" tabindex="-1" aria-labelledby="addTagModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="addTagModalLabel">Add a Tag</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form th:action="@{/topic/add-tag/{id} (id=${topic.getId()})}" method="post" id="addTagForm">
+                    <div class="mb-3">
+                        <label for="tagName" class="form-label">Tag Name</label>
+                        <!-- Dropdown Select -->
+                        <select id="existingTags" class="form-select mb-3" name="tagName">
+                            <option value="" selected disabled>Select an existing tag</option>
+                            <option th:each="tag : ${tags}" th:value="${tag.getName()}" th:text="${tag.getName()}">Example Tag</option>
+                            <option value="custom">Enter a custom tag...</option>
+                        </select>
+
+                        <input type="text" id="customTag" class="form-control d-none" placeholder="Enter custom tag name" />
+
+
+                    </div>
+                    <button type="submit" class="btn btn-primary w-100">Add Tag</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const existingTags = document.getElementById("existingTags");
+        const customTagInput = document.getElementById("customTag");
+
+        existingTags.addEventListener("change", function () {
+            if (this.value === "custom") {
+                customTagInput.classList.remove("d-none");
+                customTagInput.required = true;
+                customTagInput.name = "tagName";
+                existingTags.name = "";
+            } else {
+                customTagInput.classList.add("d-none");
+                customTagInput.required = false;
+                customTagInput.name = "";
+                existingTags.name = "tagName";
+                customTagInput.value = "";
+            }
+        });
+    });
+
+</script>
+
+
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>