diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Constants/EndpointConstants.java b/backend/src/main/java/com/group1/programminglanguagesforum/Constants/EndpointConstants.java
index 6d9be26e..dda5644d 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Constants/EndpointConstants.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Constants/EndpointConstants.java
@@ -49,6 +49,7 @@ public static class SparqlEndpoints {
     public static class TagEndpoints {
         public static final String BASE_PATH = "/tags";
         public static final String TAG_ID = BASE_PATH + "/{id}";
+        public static final String TAG_FOLLOW = BASE_PATH + "/{id}/follow";
         public static final String SEARCH = "/search" + BASE_PATH;
     }
 
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Controllers/TagController.java b/backend/src/main/java/com/group1/programminglanguagesforum/Controllers/TagController.java
index 5a76ecde..aa0d72a7 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Controllers/TagController.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Controllers/TagController.java
@@ -5,9 +5,16 @@
 import com.group1.programminglanguagesforum.DTOs.Responses.ErrorResponse;
 import com.group1.programminglanguagesforum.DTOs.Responses.GenericApiResponse;
 import com.group1.programminglanguagesforum.DTOs.Responses.GetTagDetailsResponseDto;
+import com.group1.programminglanguagesforum.DTOs.Responses.TagDto;
 import com.group1.programminglanguagesforum.DTOs.Responses.TagSearchResponseDto;
+import com.group1.programminglanguagesforum.Entities.User;
+import com.group1.programminglanguagesforum.Exceptions.ExceptionResponseHandler;
+import com.group1.programminglanguagesforum.Exceptions.UnauthorizedAccessException;
 import com.group1.programminglanguagesforum.Services.TagService;
+import com.group1.programminglanguagesforum.Services.UserContextService;
 import com.group1.programminglanguagesforum.Util.ApiResponseBuilder;
+
+import jakarta.persistence.EntityExistsException;
 import lombok.RequiredArgsConstructor;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
@@ -20,11 +27,15 @@
 import java.util.Arrays;
 import java.util.NoSuchElementException;
 
+
 @RestController
 @RequiredArgsConstructor
 @RequestMapping("/api/v1")
 public class TagController extends BaseController {
+    
     private final TagService tagService;
+    private final UserContextService userContextService;
+
     @GetMapping(value = EndpointConstants.TagEndpoints.SEARCH)
     public ResponseEntity<GenericApiResponse<TagSearchResponseDto>> tagSearch(
             @RequestParam String q,
@@ -107,4 +118,37 @@ public ResponseEntity<GenericApiResponse<GetTagDetailsResponseDto>> createTag(@R
         }
 
     }
+
+    @PostMapping(value = EndpointConstants.TagEndpoints.TAG_FOLLOW)
+    public ResponseEntity<GenericApiResponse<TagDto>> postMethodName(@PathVariable(value = "id") Long tagId) {
+        try {
+            User user = userContextService.getCurrentUser();
+            TagDto tagDto = tagService.followTag(user, tagId);
+            GenericApiResponse<TagDto> response = ApiResponseBuilder.buildSuccessResponse(TagDto.class, "Tag followed successfully", 200, tagDto);
+            return buildResponse(response, HttpStatus.OK);
+            
+        } catch (UnauthorizedAccessException e) {
+            return ExceptionResponseHandler.UnauthorizedAccessException(e);
+        } catch (NoSuchElementException e) {
+            return ExceptionResponseHandler.NoSuchElementException(e);
+        } catch (EntityExistsException e) {
+            return ExceptionResponseHandler.EntityExistsException(e);
+        }
+    }
+
+    @DeleteMapping(value = EndpointConstants.TagEndpoints.TAG_FOLLOW)
+    public ResponseEntity<GenericApiResponse<TagDto>> deleteMethodName(@PathVariable(value = "id") Long tagId) {
+        try {
+            User user = userContextService.getCurrentUser();
+            TagDto tagDto = tagService.unfollowTag(user, tagId);
+            GenericApiResponse<TagDto> response = ApiResponseBuilder.buildSuccessResponse(TagDto.class, "Tag unfollowed successfully", 200, tagDto);
+            return buildResponse(response, HttpStatus.OK);
+            
+        } catch (UnauthorizedAccessException e) {
+            return ExceptionResponseHandler.UnauthorizedAccessException(e);
+        } catch (NoSuchElementException e) {
+            return ExceptionResponseHandler.NoSuchElementException(e);
+        }
+    }
+    
 }
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetAnswersResponseDto.java b/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetAnswersResponseDto.java
index d0bfff08..703a70fa 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetAnswersResponseDto.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetAnswersResponseDto.java
@@ -26,6 +26,7 @@ public static class AnswerResponseDto {
         private Long upvoteCount;
         private Long downvoteCount;
         private boolean selfAnswer;
+        private boolean selfVoted;
     }
 
 }
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetQuestionDetailsResponseDto.java b/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetQuestionDetailsResponseDto.java
index c4cdc78b..8b3314f6 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetQuestionDetailsResponseDto.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/DTOs/Responses/GetQuestionDetailsResponseDto.java
@@ -18,6 +18,7 @@ public class GetQuestionDetailsResponseDto {
     private Long dislikeCount;
     private Long commentCount;
     private Boolean selfQuestion;
+    private Boolean selfVoted;
     private String createdAt;
     @Builder.Default
     private List<TagDto> tags= new ArrayList<>();
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Entities/Tag.java b/backend/src/main/java/com/group1/programminglanguagesforum/Entities/Tag.java
index 67be4adf..68fc36f7 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Entities/Tag.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Entities/Tag.java
@@ -1,5 +1,8 @@
 package com.group1.programminglanguagesforum.Entities;
 
+import java.util.HashSet;
+import java.util.Set;
+
 import jakarta.persistence.*;
 import lombok.*;
 
@@ -18,6 +21,14 @@ public class Tag {
     private String wikidataId;
     private String tagName;
     private String tagDescription;
+
+    @ManyToMany(fetch = FetchType.LAZY, cascade = CascadeType.ALL)
+    @JoinTable(name = "USER_TAGS",
+            joinColumns = @JoinColumn(name = "tag_id"),
+            inverseJoinColumns = @JoinColumn(name = "user_id")
+    )
+    private Set<User> followers = new HashSet<>();
+
     public Tag(String wikidataId, String tagName, String tagDescription) {
         this.wikidataId = wikidataId;
         this.tagName = tagName;
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Entities/User.java b/backend/src/main/java/com/group1/programminglanguagesforum/Entities/User.java
index 83549e25..418b8fe6 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Entities/User.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Entities/User.java
@@ -57,6 +57,16 @@ public class User implements UserDetails {
     private int followingCount = 0;
     @Builder.Default
     private Long reputationPoints = 0L;
+
+    @ManyToMany(fetch = FetchType.EAGER, cascade = CascadeType.ALL)
+    @JoinTable(
+            name = "USER_TAGS",
+            joinColumns = @JoinColumn(name = "user_id"),
+            inverseJoinColumns = @JoinColumn(name = "tag_id")
+    )
+    @Builder.Default
+    private Set<Tag> followedTags = new HashSet<>();
+
     @OneToMany(mappedBy = "askedBy", cascade = CascadeType.ALL, orphanRemoval = true)
     @Builder.Default
     private List<Question> questions = new ArrayList<>();
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Exceptions/ExceptionResponseHandler.java b/backend/src/main/java/com/group1/programminglanguagesforum/Exceptions/ExceptionResponseHandler.java
index 09f06933..bf941861 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Exceptions/ExceptionResponseHandler.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Exceptions/ExceptionResponseHandler.java
@@ -4,6 +4,9 @@
 import com.group1.programminglanguagesforum.DTOs.Responses.GenericApiResponse;
 import com.group1.programminglanguagesforum.DTOs.Responses.UserProfileResponseDto;
 import com.group1.programminglanguagesforum.Util.ApiResponseBuilder;
+
+import jakarta.persistence.EntityExistsException;
+
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 
@@ -88,4 +91,43 @@ public static <T> ResponseEntity<GenericApiResponse<T>> NoSuchElementException(N
         );
 
     }
+
+    public static <T> ResponseEntity<GenericApiResponse<T>> IllegalArgumentException(IllegalArgumentException e) {
+        ErrorResponse errorResponse = ErrorResponse.builder()
+                .errorMessage(e.getMessage())
+                .stackTrace(Arrays.toString(e.getStackTrace()))
+                .build();
+
+        GenericApiResponse<T> response = ApiResponseBuilder.buildErrorResponse(
+                UserProfileResponseDto.class,
+                e.getMessage(),
+                HttpStatus.BAD_REQUEST.value(),
+                errorResponse
+        );
+
+        return new ResponseEntity<>(
+                response,
+                HttpStatus.valueOf(response.getStatus())
+        );
+    }
+
+    public static <T> ResponseEntity<GenericApiResponse<T>> EntityExistsException(EntityExistsException e) {
+        ErrorResponse errorResponse = ErrorResponse.builder()
+                .errorMessage(e.getMessage())
+                .stackTrace(Arrays.toString(e.getStackTrace()))
+                .build();
+
+        GenericApiResponse<T> response = ApiResponseBuilder.buildErrorResponse(
+                UserProfileResponseDto.class,
+                e.getMessage(),
+                HttpStatus.CONFLICT.value(),
+                errorResponse
+        );
+
+        return new ResponseEntity<>(
+                response,
+                HttpStatus.valueOf(response.getStatus())
+        );
+    }
+    
 }
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/VoteRepository.java b/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/VoteRepository.java
index c6bbe7ba..8ee33690 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/VoteRepository.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/VoteRepository.java
@@ -13,6 +13,6 @@
 public interface VoteRepository extends JpaRepository<Vote,Long> {
     Optional<Vote> findByUserAndQuestionAndIsUpvote(User user, Question question, boolean isUpvote);
     Optional<Vote> findByUserAndAnswer(User user, Answer answer);
-
+    Optional<Vote> findByUserAndQuestion(User user, Question question);
     Optional<Vote> findByUserAndAnswerAndIsUpvote(User user, Answer answer, boolean b);
 }
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Services/AnswerService.java b/backend/src/main/java/com/group1/programminglanguagesforum/Services/AnswerService.java
index 31ddae1c..a2695071 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Services/AnswerService.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Services/AnswerService.java
@@ -9,6 +9,8 @@
 import com.group1.programminglanguagesforum.Entities.User;
 import com.group1.programminglanguagesforum.Exceptions.UnauthorizedAccessException;
 import com.group1.programminglanguagesforum.Repositories.AnswerRepository;
+import com.group1.programminglanguagesforum.Repositories.VoteRepository;
+
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 
@@ -19,6 +21,7 @@ public class AnswerService {
     private final AnswerRepository answerRepository;
     private final UserContextService userContextService;
     private final QuestionService questionService;
+    private final VoteRepository voteRepository;
 
     public CreateAnswerResponseDto createAnswer(Long questionId, CreateAnswerRequestDto createAnswerRequestDto) throws UnauthorizedAccessException {
         User currentUser = userContextService.getCurrentUser();
@@ -92,6 +95,7 @@ public GetAnswersResponseDto getAnswersForQuestion(Long questionId) {
                         .upvoteCount(answer.getUpvoteCount())
                         .downvoteCount(answer.getDownvoteCount())
                         .selfAnswer(currentUser != null && currentUser.getId().equals(answer.getAnsweredBy().getId()))
+                        .selfVoted(currentUser != null && voteRepository.findByUserAndAnswer(currentUser, answer).isPresent())
                         .build()).toList())
                 .totalItems(question.getAnswers().size())
                 .build();
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Services/QuestionService.java b/backend/src/main/java/com/group1/programminglanguagesforum/Services/QuestionService.java
index e978b703..3c892a7d 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Services/QuestionService.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Services/QuestionService.java
@@ -14,6 +14,8 @@
 import com.group1.programminglanguagesforum.Exceptions.UnauthorizedAccessException;
 import com.group1.programminglanguagesforum.Repositories.BookmarkRepository;
 import com.group1.programminglanguagesforum.Repositories.QuestionRepository;
+import com.group1.programminglanguagesforum.Repositories.VoteRepository;
+
 import lombok.RequiredArgsConstructor;
 
 import org.springframework.data.domain.Page;
@@ -31,6 +33,7 @@ public class QuestionService {
         private final UserContextService userContextService;
         private final TagService tagService;
         private final BookmarkRepository bookmarkRepository;
+        private final VoteRepository voteRepository;
 
         public Optional<Question> findById(Long id) {
                 return questionRepository.findById(id);
@@ -81,26 +84,23 @@ public CreateQuestionResponseDto createQuestion(CreateQuestionRequestDto dto)
         }
 
     public GetQuestionDetailsResponseDto getQuestion(Long id) throws NoSuchElementException {
-        Optional<Question> questionOptional = questionRepository.findById(id);
-        if (questionOptional.isEmpty()) {
-            throw new NoSuchElementException("Question not found");
-        }
-        Question question = questionOptional.get();
-        boolean selfQuestion;
+        User currentUser;
         try {
-            User currentUser = userContextService.getCurrentUser();
-            selfQuestion = currentUser.getId().equals(question.getAskedBy().getId());
+            currentUser = userContextService.getCurrentUser();
         } catch (UnauthorizedAccessException e) {
-            selfQuestion = false;
+            currentUser = null;
         }
 
-        boolean isBookmarked;
-        try {
-            isBookmarked = isBookmarked(id);
-        } catch (UnauthorizedAccessException e) {
-            isBookmarked = false;
+        Optional<Question> questionOptional = questionRepository.findById(id);
+        if (questionOptional.isEmpty()) {
+            throw new NoSuchElementException("Question not found");
         }
 
+        Question question = questionOptional.get();
+        boolean selfQuestion = (currentUser != null && currentUser.getId().equals(question.getAskedBy().getId()));
+        boolean isBookmarked = (currentUser != null && bookmarkRepository.existsByUserAndQuestion(currentUser, question));
+        boolean selfVoted = (currentUser != null && voteRepository.findByUserAndQuestion(currentUser, question).isPresent());
+
         return GetQuestionDetailsResponseDto.builder()
                 .id(question.getId())
                 .title(question.getTitle())
@@ -109,6 +109,7 @@ public GetQuestionDetailsResponseDto getQuestion(Long id) throws NoSuchElementEx
                 .dislikeCount(question.getDownvoteCount())
                 .commentCount(question.getCommentCount())
                 .selfQuestion(selfQuestion)
+                .selfVoted(selfVoted)
                 .createdAt(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(question.getCreatedAt()))
                 .updatedAt(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(question.getUpdatedAt()))
                 .author(AuthorDto.builder()
@@ -128,12 +129,6 @@ public GetQuestionDetailsResponseDto getQuestion(Long id) throws NoSuchElementEx
 
         }
 
-        private boolean isBookmarked(Long questionId) throws UnauthorizedAccessException {
-                User user = userContextService.getCurrentUser();
-                Question question = findById(questionId).orElseThrow();
-                return bookmarkRepository.existsByUserAndQuestion(user, question);
-        }
-
         public String deleteQuestion(Long id) {
                 Optional<Question> questionOptional = questionRepository.findById(id);
                 if (questionOptional.isEmpty()) {
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Services/TagService.java b/backend/src/main/java/com/group1/programminglanguagesforum/Services/TagService.java
index 65a71823..45857cfc 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Services/TagService.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Services/TagService.java
@@ -5,6 +5,9 @@
 import com.group1.programminglanguagesforum.Entities.*;
 import com.group1.programminglanguagesforum.Repositories.QuestionRepository;
 import com.group1.programminglanguagesforum.Repositories.TagRepository;
+import com.group1.programminglanguagesforum.Repositories.UserRepository;
+
+import jakarta.persistence.EntityExistsException;
 import lombok.RequiredArgsConstructor;
 import org.modelmapper.ModelMapper;
 import org.springframework.data.domain.Page;
@@ -21,6 +24,7 @@ public class TagService {
     private final TagRepository tagRepository;
     private final ModelMapper modelMapper;
     private final QuestionRepository questionRepository;
+    private final UserRepository userRepository;
 
     public List<Tag> findAllByIdIn(List<Long> tagIds) {
         return tagRepository.findAllByIdIn(tagIds);
@@ -103,4 +107,49 @@ public Page<GetTagDetailsResponseDto> searchTags(String q, Pageable pageable) {
                 .tagType(getTagType(tag).toString())
                 .build());
     }
+
+    public TagDto followTag(User user, Long tagId) {
+        
+        Optional<Tag> tag = tagRepository.findById(tagId);
+        if (tag.isEmpty()) {
+            throw new NoSuchElementException("Tag not found");
+        }
+        
+        Tag tagEntity = tag.get();
+
+        if (user.getFollowedTags().stream().anyMatch(t -> t.getId().equals(tagId))) {
+            throw new EntityExistsException("User already follows this tag");
+        }
+        
+        user.getFollowedTags().add(tagEntity);
+        userRepository.save(user);
+
+        return TagDto.builder()
+                .id(tagEntity.getId())
+                .name(tagEntity.getTagName())
+                .build();
+    }
+
+    public TagDto unfollowTag(User user, Long tagId) {
+        
+        Optional<Tag> tag = tagRepository.findById(tagId);
+        if (tag.isEmpty()) {
+            throw new NoSuchElementException("Tag not found");
+        }
+        
+        Tag tagEntity = tag.get();
+        
+        if (!user.getFollowedTags().stream().anyMatch(t -> t.getId().equals(tagId))) {
+            throw new NoSuchElementException("User does not follow this tag");
+        }
+        
+        user.getFollowedTags().removeIf(t -> t.getId().equals(tagId));
+        userRepository.save(user);
+        
+        return TagDto.builder()
+                .id(tagEntity.getId())
+                .name(tagEntity.getTagName())
+                .build();
+    }
+
 }
diff --git a/backend/src/test/java/com/group1/programminglanguagesforum/Services/TagServiceTests.java b/backend/src/test/java/com/group1/programminglanguagesforum/Services/TagServiceTests.java
index afe16bfc..d1bef799 100644
--- a/backend/src/test/java/com/group1/programminglanguagesforum/Services/TagServiceTests.java
+++ b/backend/src/test/java/com/group1/programminglanguagesforum/Services/TagServiceTests.java
@@ -67,7 +67,7 @@ void testCreateTag() {
                 .build();
 
         // Mock the Tag returned by the repository save method
-        Tag savedTag = new Tag(1L, null, "New Tag", "Tag description");
+        Tag savedTag = new Tag(1L, null, "New Tag", "Tag description", null);
 
         // Mock tagRepository behavior
         when(tagRepository.save(any(Tag.class))).thenReturn(savedTag);
@@ -90,7 +90,7 @@ void testCreateTag() {
     void testGetTagDetails_Success() {
         Long tagId = 1L;
 
-        Tag mockTag = new Tag(1L, null, "Tag1", "Description1");
+        Tag mockTag = new Tag(1L, null, "Tag1", "Description1", null);
         List<Question> mockQuestions = Arrays.asList(
                 new Question(1L, "Question1", "Body1", DifficultyLevel.EASY, 0L, 0L, null, null, null, null, null,null),
                 new Question(2L, "Question2", "Body2", DifficultyLevel.MEDIUM, 0L, 0L, null, null, null, null, null,null));
diff --git a/dev.yml b/dev.yml
index 8ceb51ee..08ced51e 100644
--- a/dev.yml
+++ b/dev.yml
@@ -44,14 +44,10 @@ services:
       - PROXY_API=http://backend:8080
     ports:
       - "5173:5173"
+    volumes:
+      - ./frontend/src:/app/src
     develop:
       watch:
-        - action: sync
-          x-initialSync: true
-          path: ./frontend
-          target: /app
-          ignore:
-            - ./frontend/node_modules/
         - action: rebuild
           path: ./frontend/package.json
 volumes:
diff --git a/frontend/package.json b/frontend/package.json
index 783edf87..5b24eb45 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,12 +24,13 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.1.3",
@@ -38,6 +39,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
     "country-emoji": "^1.5.6",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.376.0",
diff --git a/frontend/src/components/ContentWithSnippets.tsx b/frontend/src/components/ContentWithSnippets.tsx
index 2f4f5003..88d1bd70 100644
--- a/frontend/src/components/ContentWithSnippets.tsx
+++ b/frontend/src/components/ContentWithSnippets.tsx
@@ -55,9 +55,5 @@ export const ContentWithSnippets: React.FC<ContentWithSnippetsProps> = ({
     });
   }, [content]);
 
-  return (
-    <div className="prose max-w-full whitespace-pre-wrap">
-      {renderedContent}
-    </div>
-  );
+  return <div className="prose max-w-full">{renderedContent}</div>;
 };
diff --git a/frontend/src/components/CreateTagForm.test.tsx b/frontend/src/components/CreateTagForm.test.tsx
new file mode 100644
index 00000000..3d3d8e0c
--- /dev/null
+++ b/frontend/src/components/CreateTagForm.test.tsx
@@ -0,0 +1,133 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CreateTagForm } from "./CreateTagForm"; // Import your component
+import { useCreateTag } from "@/services/api/programmingForumComponents"; // Import the hook
+
+// Mock the useCreateTag hook
+vi.mock("@/services/api/programmingForumComponents", () => ({
+  useCreateTag: vi.fn(),
+}));
+
+describe("CreateTagForm", () => {
+  const mockCreateTag = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useCreateTag).mockReturnValue({
+      mutateAsync: mockCreateTag,
+      isPending: false,
+    } as unknown as ReturnType<typeof useCreateTag>);
+  });
+
+  it("renders form elements correctly", () => {
+    render(<CreateTagForm />);
+
+    // Check for presence of form fields
+    expect(screen.getByPlaceholderText("Tag name")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Tag description")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Create Tag" }),
+    ).toBeInTheDocument();
+  });
+
+  it("submits form with valid data when 'Create Tag' is clicked", async () => {
+    render(<CreateTagForm />);
+
+    const nameInput = screen.getByPlaceholderText("Tag name");
+    const descriptionInput = screen.getByPlaceholderText("Tag description");
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+
+    // Simulate user input
+    fireEvent.change(nameInput, { target: { value: "NewTag" } });
+    fireEvent.change(descriptionInput, {
+      target: { value: "A description for NewTag" },
+    });
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      // Check if the createTag function was called with the correct arguments
+      expect(mockCreateTag).toHaveBeenCalledWith({
+        body: {
+          name: "NewTag",
+          description: "A description for NewTag",
+        },
+      });
+    });
+  });
+
+  it("disables submit button when form is empty", () => {
+    render(<CreateTagForm />);
+
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+
+    // Initially, the submit button should be disabled
+    expect(submitButton).toBeDisabled();
+
+    // Simulate filling the form
+    fireEvent.change(screen.getByPlaceholderText("Tag name"), {
+      target: { value: "NewTag" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("Tag description"), {
+      target: { value: "Description" },
+    });
+
+    // The submit button should be enabled now
+    expect(submitButton).not.toBeDisabled();
+  });
+
+  it("shows loading state while creating the tag", async () => {
+    vi.mocked(useCreateTag).mockReturnValue({
+      mutateAsync: mockCreateTag,
+      isPending: true, // Simulate loading state
+    } as unknown as ReturnType<typeof useCreateTag>);
+
+    render(<CreateTagForm />);
+
+    // Wait for the button text to change to "Creating..."
+    const submitButton = await screen.findByRole("button", {
+      name: /Create Tag|Creating.../,
+    });
+
+    // The button should display "Creating..." and be disabled
+    expect(submitButton).toHaveTextContent("Creating...");
+    expect(submitButton).toBeDisabled();
+  });
+
+  it("clears form inputs after successful submission", async () => {
+    render(<CreateTagForm />);
+
+    const nameInput = screen.getByPlaceholderText("Tag name");
+    const descriptionInput = screen.getByPlaceholderText("Tag description");
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+
+    fireEvent.change(nameInput, { target: { value: "NewTag" } });
+    fireEvent.change(descriptionInput, { target: { value: "Description" } });
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      // After form submission, inputs should be cleared
+      expect(nameInput).toHaveValue("");
+      expect(descriptionInput).toHaveValue("");
+    });
+  });
+
+  it("does not submit if fields are empty", async () => {
+    render(<CreateTagForm />);
+
+    const nameInput = screen.getByPlaceholderText("Tag name");
+    const descriptionInput = screen.getByPlaceholderText("Tag description");
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+
+    fireEvent.change(nameInput, { target: { value: "" } });
+    fireEvent.change(descriptionInput, { target: { value: "" } });
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      // The submit function should not be called because inputs are empty
+      expect(mockCreateTag).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/frontend/src/components/CreateTagForm.tsx b/frontend/src/components/CreateTagForm.tsx
new file mode 100644
index 00000000..e605a141
--- /dev/null
+++ b/frontend/src/components/CreateTagForm.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import { useCreateTag } from "@/services/api/programmingForumComponents";
+import { useState } from "react";
+
+interface CreateTagFormProps {
+  onCreateSuccess?: () => void; // Optional callback for successful tag creation
+}
+
+export function CreateTagForm({ onCreateSuccess }: CreateTagFormProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const { mutateAsync: createTag, isPending } = useCreateTag();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !description.trim()) return;
+
+    try {
+      await createTag({
+        body: { name, description },
+      });
+      setName("");
+      setDescription("");
+      if (onCreateSuccess) onCreateSuccess();
+      // Optionally refresh the tag list or show a success message
+    } catch (error) {
+      console.error("Failed to create tag:", error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="mt-6 flex flex-col gap-4">
+      <Input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Tag name"
+        className="min-w-[200px]"
+        required
+      />
+
+      <Textarea
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder="Tag description"
+        className="min-h-[100px]"
+        required
+      />
+
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          disabled={isPending || !name.trim() || !description.trim()}
+        >
+          {isPending ? "Creating..." : "Create Tag"}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/frontend/src/components/CreateTagPage.test.tsx b/frontend/src/components/CreateTagPage.test.tsx
new file mode 100644
index 00000000..dbb00afb
--- /dev/null
+++ b/frontend/src/components/CreateTagPage.test.tsx
@@ -0,0 +1,119 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import CreateTagPage from "./CreateTagPage"; // Adjust path to the component
+import { useCreateTag } from "@/services/api/programmingForumComponents"; // Import the API hook
+
+// Mock the API hook used in CreateTagForm
+vi.mock("@/services/api/programmingForumComponents", () => ({
+  useCreateTag: vi.fn(),
+}));
+
+describe("CreateTagPage", () => {
+  const mockCreateTag = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock the hook to simulate a successful submission
+    vi.mocked(useCreateTag).mockReturnValue({
+      mutateAsync: mockCreateTag,
+      isPending: false,
+    } as unknown as ReturnType<typeof useCreateTag>);
+  });
+
+  it("renders CreateTagForm correctly", () => {
+    render(<CreateTagPage />);
+
+    // Check if the form title is displayed
+    expect(screen.getByText("Create a New Tag")).toBeInTheDocument();
+    // Check if input fields are displayed
+    expect(screen.getByPlaceholderText("Tag name")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Tag description")).toBeInTheDocument();
+    // Check if the submit button is displayed
+    expect(
+      screen.getByRole("button", { name: "Create Tag" }),
+    ).toBeInTheDocument();
+  });
+
+  it("submits the form with valid data", async () => {
+    render(<CreateTagPage />);
+
+    const nameInput = screen.getByPlaceholderText("Tag name");
+    const descriptionInput = screen.getByPlaceholderText("Tag description");
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+
+    // Simulate filling in the form
+    fireEvent.change(nameInput, { target: { value: "New Tag" } });
+    fireEvent.change(descriptionInput, {
+      target: { value: "Description of the new tag" },
+    });
+
+    // Simulate form submission
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      // Ensure the createTag function was called with the correct parameters
+      expect(mockCreateTag).toHaveBeenCalledWith({
+        body: {
+          name: "New Tag",
+          description: "Description of the new tag",
+        },
+      });
+    });
+  });
+
+  it("disables the submit button when fields are empty", () => {
+    render(<CreateTagPage />);
+
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+    expect(submitButton).toBeDisabled();
+  });
+
+  it("enables the submit button when fields are filled", () => {
+    render(<CreateTagPage />);
+
+    const nameInput = screen.getByPlaceholderText("Tag name");
+    const descriptionInput = screen.getByPlaceholderText("Tag description");
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+
+    // Fill the fields
+    fireEvent.change(nameInput, { target: { value: "New Tag" } });
+    fireEvent.change(descriptionInput, {
+      target: { value: "Description of the new tag" },
+    });
+
+    expect(submitButton).toBeEnabled();
+  });
+
+  it("displays loading state while submitting", async () => {
+    // Mock the API hook to simulate a pending request
+    vi.mocked(useCreateTag).mockReturnValue({
+      mutateAsync: mockCreateTag,
+      isPending: true,
+    } as unknown as ReturnType<typeof useCreateTag>);
+
+    render(<CreateTagPage />);
+  });
+
+  it("clears the input fields after successful submission", async () => {
+    render(<CreateTagPage />);
+
+    const nameInput = screen.getByPlaceholderText("Tag name");
+    const descriptionInput = screen.getByPlaceholderText("Tag description");
+    const submitButton = screen.getByRole("button", { name: "Create Tag" });
+
+    // Fill the fields
+    fireEvent.change(nameInput, { target: { value: "New Tag" } });
+    fireEvent.change(descriptionInput, {
+      target: { value: "Description of the new tag" },
+    });
+
+    // Submit the form
+    fireEvent.click(submitButton);
+
+    // Simulate successful submission
+    await waitFor(() => {
+      expect(nameInput).toHaveValue("");
+      expect(descriptionInput).toHaveValue("");
+    });
+  });
+});
diff --git a/frontend/src/components/CreateTagPage.tsx b/frontend/src/components/CreateTagPage.tsx
new file mode 100644
index 00000000..0c882e01
--- /dev/null
+++ b/frontend/src/components/CreateTagPage.tsx
@@ -0,0 +1,16 @@
+import { CreateTagForm } from "@/components/CreateTagForm"; // Import the CreateTagForm component
+
+export default function CreateTagPage() {
+  return (
+    <div className="container py-8">
+      <h1 className="mb-4 text-2xl font-bold">Create a New Tag</h1>
+
+      <CreateTagForm
+        onCreateSuccess={() => {
+          // Logic to handle post-create actions (e.g., show success message, refresh list, etc.)
+          console.log("Tag created successfully!");
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/components/NavbarLayout.tsx b/frontend/src/components/NavbarLayout.tsx
index 43519117..b3964039 100644
--- a/frontend/src/components/NavbarLayout.tsx
+++ b/frontend/src/components/NavbarLayout.tsx
@@ -30,7 +30,10 @@ import { SearchBar } from "./SearchBar";
 import { Button } from "./ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
 
-const links = [{ name: "Home", path: "/" }] as const;
+const links = [
+  { name: "Home", path: "/" },
+  { name: "Tags", path: "/tags" },
+] as const;
 
 export const NavbarLayout = () => {
   const navigation = useNavigation();
diff --git a/frontend/src/components/Tags.tsx b/frontend/src/components/Tags.tsx
new file mode 100644
index 00000000..2b1d13e6
--- /dev/null
+++ b/frontend/src/components/Tags.tsx
@@ -0,0 +1,63 @@
+//import { CreateTagForm } from "@/components/CreateTagForm";
+import { TagCard } from "@/components/TagCard";
+import { useSearchTags } from "@/services/api/programmingForumComponents"; // Import your API hook
+import { TagDetails } from "@/services/api/programmingForumSchemas"; // Assuming this is the correct type for tags
+import { FullscreenLoading } from "../components/FullscreenLoading";
+import { useSearchParams, Link } from "react-router-dom";
+import ErrorAlert from "@/components/ErrorAlert";
+import { Button } from "@/components/ui/button"; // Assuming Button is a component
+import Plus from "@/assets/Icon/General/Plus.svg?react";
+
+export default function TagsPage() {
+  // Using the `useSearchTags` hook to fetch the default 20 tags
+  const [params] = useSearchParams();
+  const {
+    data: searchResult,
+    isLoading,
+    error,
+  } = useSearchTags({
+    queryParams: { q: params.get("q") ?? "" }, // No query parameter needed to fetch the default 20 tags
+  });
+
+  // If the API is still loading, show the loading component
+  if (isLoading) {
+    return <FullscreenLoading overlay />;
+  }
+
+  // If there is an error during the fetch, display the error alert
+  if (error) {
+    return <ErrorAlert error={error} />;
+  }
+
+  // Extracting tags from the API response
+  const tags = (searchResult?.data as { items?: TagDetails[] }).items || [];
+
+  return (
+    <div className="container py-8">
+      {/* Container for the title and the plus button */}
+      <div className="flex items-center gap-2 py-4">
+        <h1 className="text-2xl font-bold">Tags</h1>
+
+        {/* Button to navigate to create tag page */}
+        <Button
+          asChild
+          size="icon"
+          className="rounded-full bg-red-500 text-white"
+        >
+          <Link to="/tags/new">
+            <Plus />
+          </Link>
+        </Button>
+      </div>
+
+      {/* Section for displaying all tags */}
+      <div>
+        <div className="grid grid-cols-3 gap-4">
+          {tags.map((tag) => (
+            <TagCard key={tag.tagId} tag={tag} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/multi-select.tsx b/frontend/src/components/multi-select.tsx
new file mode 100644
index 00000000..9ac8bd92
--- /dev/null
+++ b/frontend/src/components/multi-select.tsx
@@ -0,0 +1,272 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckIcon, ChevronDown, XCircle, XIcon } from "lucide-react";
+import * as React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const multiSelectVariants = cva(
+  "m-1 transition ease-in-out delay-150 duration-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+        secondary:
+          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof multiSelectVariants> {
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  onValueChange: (value: string[]) => void;
+  defaultValue?: string[];
+  placeholder?: string;
+  animation?: number;
+  maxCount?: number;
+  modalPopover?: boolean;
+  asChild?: boolean;
+  className?: string;
+}
+
+export const MultiSelect = React.forwardRef<
+  HTMLButtonElement,
+  MultiSelectProps
+>(
+  (
+    {
+      options,
+      onValueChange,
+      variant,
+      defaultValue = [],
+      placeholder = "Select options",
+      maxCount = 3,
+      modalPopover = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [selectedValues, setSelectedValues] =
+      React.useState<string[]>(defaultValue);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+
+    const toggleOption = (optionValue: string | undefined) => {
+      if (!optionValue) {
+        console.warn(`Attempted to toggle non-existent value: ${optionValue}`);
+        return;
+      }
+
+      const isSelected = selectedValues.includes(optionValue);
+      const newSelectedValues = isSelected
+        ? selectedValues.filter((value) => value !== optionValue) // Deselect
+        : [...selectedValues, optionValue]; // Select
+
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+
+    const handleClear = () => {
+      setSelectedValues([]);
+      onValueChange([]);
+    };
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+
+    const clearExtraOptions = () => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear();
+      } else {
+        const allValues = options.map((option) => option.value);
+        setSelectedValues(allValues);
+        onValueChange(allValues);
+      }
+    };
+
+    return (
+      <Popover
+        open={isPopoverOpen}
+        onOpenChange={setIsPopoverOpen}
+        modal={modalPopover}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            onClick={handleTogglePopover}
+            className={cn(
+              "flex h-auto min-h-10 w-full items-center justify-between rounded-md border bg-inherit p-1 hover:bg-inherit [&_svg]:pointer-events-auto",
+              className,
+            )}
+          >
+            {selectedValues.length > 0 ? (
+              <div className="flex w-full items-center justify-between">
+                <div className="flex flex-wrap items-center">
+                  {selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    const IconComponent = option?.icon;
+                    return (
+                      <Badge
+                        key={`badge-${value}`}
+                        className={cn(multiSelectVariants({ variant }))}
+                      >
+                        {IconComponent && (
+                          <IconComponent className="mr-2 h-4 w-4" />
+                        )}
+                        {option?.label || "Unknown"}
+                        <XCircle
+                          className="ml-2 h-4 w-4 cursor-pointer"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            toggleOption(value);
+                          }}
+                        />
+                      </Badge>
+                    );
+                  })}
+                  {selectedValues.length > maxCount && (
+                    <Badge
+                      className={cn(
+                        "border-foreground/1 bg-transparent text-foreground hover:bg-transparent",
+                      )}
+                    >
+                      {`+ ${selectedValues.length - maxCount} more`}
+                      <XCircle
+                        className="ml-2 h-4 w-4 cursor-pointer"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          clearExtraOptions();
+                        }}
+                      />
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  <XIcon
+                    className="mx-2 h-4 cursor-pointer text-muted-foreground"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleClear();
+                    }}
+                  />
+                  <Separator
+                    orientation="vertical"
+                    className="flex h-full min-h-6"
+                  />
+                  <ChevronDown className="mx-2 h-4 cursor-pointer text-muted-foreground" />
+                </div>
+              </div>
+            ) : (
+              <div className="mx-auto flex w-full items-center justify-between">
+                <span className="mx-3 text-sm text-muted-foreground">
+                  {placeholder}
+                </span>
+                <ChevronDown className="mx-2 h-4 cursor-pointer text-muted-foreground" />
+              </div>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Command>
+            <CommandInput placeholder="Search..." />
+
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  key="select-all"
+                  onSelect={toggleAll}
+                  className="cursor-pointer"
+                >
+                  <div
+                    className={cn(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      selectedValues.length === options.length
+                        ? "bg-primary text-primary-foreground"
+                        : "opacity-50 [&_svg]:invisible",
+                    )}
+                  >
+                    <CheckIcon className="h-4 w-4" />
+                  </div>
+                  <span>(Select All)</span>
+                </CommandItem>
+                {options.map((option, index) => {
+                  const uniqueKey = option.value || `option-${index}`; // Generate a unique key
+                  const isSelected = selectedValues.includes(option.value); // Check if this option is selected
+
+                  return (
+                    <CommandItem
+                      key={`command-item-${uniqueKey}`} // Unique key for each CommandItem
+                      onSelect={() => toggleOption(option.value)} // Toggle this option
+                      className="cursor-pointer"
+                    >
+                      <div
+                        className={cn(
+                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                          isSelected
+                            ? "bg-primary text-primary-foreground"
+                            : "opacity-50 [&_svg]:invisible",
+                        )}
+                      >
+                        <CheckIcon className="h-4 w-4" />
+                      </div>
+                      {option.icon && (
+                        <option.icon
+                          key={`icon-${uniqueKey}`} // Unique key for the icon
+                          className="mr-2 h-4 w-4 text-muted-foreground"
+                        />
+                      )}
+                      <span key={`label-${uniqueKey}`}>
+                        {option.label || "Unknown"}
+                      </span>{" "}
+                      {/* Display label */}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+MultiSelect.displayName = "MultiSelect";
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index d3d5d604..b12af0a9 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/frontend/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
new file mode 100644
index 00000000..f0e4e3fb
--- /dev/null
+++ b/frontend/src/components/ui/command.tsx
@@ -0,0 +1,151 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
new file mode 100644
index 00000000..12d81c4a
--- /dev/null
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 2ed5fa82..be255e62 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "text-normal flex flex-1 items-center justify-center whitespace-nowrap rounded-2xl px-8 py-4 font-bold opacity-50 ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:opacity-100 data-[state=active]:shadow-sm",
+      "text-normal flex flex-1 items-center justify-center whitespace-nowrap rounded-2xl px-8 py-4 font-bold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:opacity-100 data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
diff --git a/frontend/src/routes/create-question.tsx b/frontend/src/routes/create-question.tsx
new file mode 100644
index 00000000..3933f910
--- /dev/null
+++ b/frontend/src/routes/create-question.tsx
@@ -0,0 +1,195 @@
+import { MultiSelect } from "@/components/multi-select";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  useCreateQuestion,
+  useSearchTags,
+} from "@/services/api/programmingForumComponents";
+import { queryKeyFn } from "@/services/api/programmingForumContext";
+import { TagDetails } from "@/services/api/programmingForumSchemas";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { InvalidateQueryFilters, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { z } from "zod";
+
+// Schema validation for the form
+const newQuestionSchema = z.object({
+  title: z.string().min(1, "Title is required").max(200, "Max 200 characters"),
+  content: z
+    .string()
+    .min(1, "Content is required")
+    .max(100000, "Max 100,000 characters"),
+  tags: z
+    .array(z.object({ tagId: z.number(), name: z.string() }))
+    .min(1, "At least one tag is required"),
+  difficultyLevel: z.enum(["EASY", "MEDIUM", "HARD"], {
+    errorMap: () => ({ message: "Select a difficulty level" }),
+  }),
+});
+
+type NewQuestion = z.infer<typeof newQuestionSchema>;
+
+export default function QuestionCreationPage() {
+  const form = useForm<NewQuestion>({
+    resolver: zodResolver(newQuestionSchema),
+    defaultValues: {
+      title: "",
+      content: "",
+      tags: [],
+      difficultyLevel: "EASY",
+    },
+  });
+
+  const { handleSubmit, control } = form;
+  const queryClient = useQueryClient();
+
+  const [availableTags, setAvailableTags] = useState<
+    { tagId: string; name: string }[]
+  >([]);
+
+  const { data: tagSearchData } = useSearchTags(
+    { queryParams: { q: "", pageSize: 1000 } },
+    { enabled: true },
+  );
+
+  useEffect(() => {
+    if (tagSearchData?.data) {
+      setAvailableTags((tagSearchData.data as { items: TagDetails[] }).items);
+    }
+  }, [tagSearchData]);
+
+  const navigate = useNavigate();
+
+  const { mutateAsync } = useCreateQuestion({
+    onSuccess: (result) => {
+      queryClient.invalidateQueries(
+        queryKeyFn({
+          path: "/users/me",
+          operationId: "getMe",
+          variables: {},
+        }) as unknown as InvalidateQueryFilters,
+      );
+
+      navigate(`/question/${result.data.id}`);
+    },
+  });
+
+  return (
+    <div className="container flex flex-col gap-4 py-16">
+      <h1>Create a new question</h1>
+      <Form {...form}>
+        <form
+          onSubmit={handleSubmit(async (values) => {
+            const tagIds = values.tags.map((tag) => tag.tagId);
+            await mutateAsync({
+              body: {
+                ...values,
+                tagIds: tagIds.map(Number),
+              },
+            });
+          })}
+          className="flex flex-col gap-6"
+        >
+          {/* Title */}
+          <FormField
+            control={control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input placeholder="Enter question title..." {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Content */}
+          <FormField
+            control={control}
+            name="content"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Textarea
+                    placeholder="Describe your question..."
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Tags */}
+          <FormField
+            control={control}
+            name="tags"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <MultiSelect
+                    options={availableTags.map((tag) => ({
+                      value: tag.tagId,
+                      label: tag.name,
+                    }))}
+                    value={field.value.map((tag) => String(tag.tagId))} // Bind selected values correctly
+                    onValueChange={(selectedIds) => {
+                      // Map selected IDs back to tag objects
+                      const selectedTags = selectedIds
+                        .map((id) =>
+                          availableTags.find(
+                            (tag) => Number(tag.tagId) === Number(id),
+                          ),
+                        )
+                        .filter(Boolean);
+                      console.log(selectedTags);
+                      field.onChange(selectedTags);
+                    }}
+                    placeholder="Select Tags"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Difficulty */}
+          <FormField
+            control={control}
+            name="difficultyLevel"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <select
+                    className="rounded border border-gray-300 px-4 py-2"
+                    value={field.value}
+                    onChange={(e) => field.onChange(e.target.value)}
+                  >
+                    <option value="EASY">Easy</option>
+                    <option value="MEDIUM">Medium</option>
+                    <option value="HARD">Hard</option>
+                  </select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Submit */}
+          <Button type="submit">Submit</Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 55c008b9..fd77946f 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -1,14 +1,17 @@
+import CreateTagPage from "@/components/CreateTagPage"; // Import the new CreateTagPage
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { NavbarLayout } from "@/components/NavbarLayout";
+import TagsPage from "@/components/Tags";
 import { signout } from "@/services/auth";
 import { RouteObject, createBrowserRouter, redirect } from "react-router-dom";
+import QuestionCreationPage from "./create-question";
 import { IndexRoute } from "./home";
 import Login from "./login";
+import Profile from "./profile";
 import QuestionRoute from "./question";
 import { Search } from "./search";
 import Signup from "./signup";
 import TagPage from "./tag";
-import Profile from "./profile";
 
 export const routes: RouteObject[] = [
   {
@@ -46,6 +49,18 @@ export const routes: RouteObject[] = [
     path: "tag/:tagId",
     Component: TagPage,
   },
+  {
+    path: "/questions/new",
+    Component: QuestionCreationPage, // Ensure this route is defined
+  },
+  {
+    path: "/tags",
+    Component: TagsPage,
+  },
+  {
+    path: "/tags/new",
+    Component: CreateTagPage,
+  },
 ];
 
 export const routeConfig: RouteObject[] = [
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 19b6ece4..a5f5a772 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -238,6 +238,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.13.10":
+  version: 7.26.0
+  resolution: "@babel/runtime@npm:7.26.0"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10c0/12c01357e0345f89f4f7e8c0e81921f2a3e3e101f06e8eaa18a382b517376520cd2fa8c237726eb094dab25532855df28a7baaf1c26342b52782f6936b07c287
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.25.7":
   version: 7.25.7
   resolution: "@babel/template@npm:7.25.7"
@@ -807,6 +816,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/primitive@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10c0/912216455537db3ca77f3e7f70174fb2b454fbd4a37a0acb7cfadad9ab6131abdfb787472242574460a3c301edf45738340cc84f6717982710082840fde7d916
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/primitive@npm:1.1.0"
@@ -949,6 +967,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-compose-refs@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/be06f8dab35b5a1bffa7a5982fb26218ddade1acb751288333e3b89d7b4a7dfb5a6371be83876dac0ec2ebe0866d295e8618b778608e1965342986ea448040ec
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-compose-refs@npm:1.1.0"
@@ -962,6 +995,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-context@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-context@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/3de5761b32cc70cd61715527f29d8c699c01ab28c195ced972ccbc7025763a373a68f18c9f948c7a7b922e469fd2df7fee5f7536e3f7bad44ffc06d959359333
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-context@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-context@npm:1.1.0"
@@ -988,7 +1036,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dialog@npm:^1.0.5":
+"@radix-ui/react-dialog@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dialog@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.0.5"
+    "@radix-ui/react-focus-guards": "npm:1.0.1"
+    "@radix-ui/react-focus-scope": "npm:1.0.4"
+    "@radix-ui/react-id": "npm:1.0.1"
+    "@radix-ui/react-portal": "npm:1.0.4"
+    "@radix-ui/react-presence": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.5"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/c5b3069397379e79857a3203f3ead4d12d87736b59899f02a63e620a07dd1e6704e15523926cdf8e39afe1c945a7ff0f2533c5ea5be1e17c3114820300a51133
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dialog@npm:^1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-dialog@npm:1.1.2"
   dependencies:
@@ -1033,6 +1114,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dismissable-layer@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-escape-keydown": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/7e4308867aecfb07b506330c1964d94a52247ab9453725613cd326762aa13e483423c250f107219c131b0449600eb8d1576ce3159c2b96e8c978f75e46062cb2
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dismissable-layer@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-dismissable-layer@npm:1.1.1"
@@ -1081,6 +1186,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-guards@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/d5fd4e5aa9d9a87c8ad490b3b4992d6f1d9eddf18e56df2a2bcf8744c4332b275d73377fd193df3e6ba0ad9608dc497709beca5c64de2b834d5f5350b3c9a272
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-guards@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-focus-guards@npm:1.1.1"
@@ -1094,6 +1214,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-scope@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/2fce0bafcab4e16cf4ed7560bda40654223f3d0add6b231e1c607433030c14e6249818b444b7b58ee7a6ff6bbf8e192c9c81d22c3a5c88c2daade9d1f881b5be
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-scope@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-focus-scope@npm:1.1.0"
@@ -1115,6 +1257,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-id@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-id@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/e2859ca58bea171c956098ace7ecf615cf9432f58a118b779a14720746b3adcf0351c36c75de131548672d3cd290ca238198acbd33b88dc4706f98312e9317ad
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-id@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-id@npm:1.1.0"
@@ -1185,7 +1343,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-popover@npm:^1.0.7":
+"@radix-ui/react-popover@npm:^1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-popover@npm:1.1.2"
   dependencies:
@@ -1246,6 +1404,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-portal@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-portal@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/fed32f8148b833fe852fb5e2f859979ffdf2fb9a9ef46583b9b52915d764ad36ba5c958a64e61d23395628ccc09d678229ee94cd112941e8fe2575021f820c29
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-portal@npm:1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-portal@npm:1.1.2"
@@ -1266,6 +1444,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-presence@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-presence@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/90780618b265fe794a8f1ddaa5bfd3c71a1127fa79330a14d32722e6265b44452a9dd36efe4e769129d33e57f979f6b8713e2cbf2e2755326aa3b0f337185b6e
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-presence@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-presence@npm:1.1.1"
@@ -1286,6 +1485,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-primitive@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-primitive@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-slot": "npm:1.0.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/67a66ff8898a5e7739eda228ab6f5ce808858da1dce967014138d87e72b6bbfc93dc1467c706d98d1a2b93bf0b6e09233d1a24d31c78227b078444c1a69c42be
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-primitive@npm:2.0.0":
   version: 2.0.0
   resolution: "@radix-ui/react-primitive@npm:2.0.0"
@@ -1371,7 +1590,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.0.2":
+"@radix-ui/react-separator@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-separator@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/0ca9e25db27b6b001f3c0c50b2df9d6cf070b949f183043e263115d694a25b7268fecd670572469a512e556deca25ebb08b3aec4a870f0309eed728eef19ab8a
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-slot@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/3af6ea4891e6fa8091e666802adffe7718b3cd390a10fa9229a5f40f8efded9f3918ea01b046103d93923d41cc32119505ebb6bde76cad07a87b6cf4f2119347
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-slot@npm:1.1.0"
   dependencies:
@@ -1472,6 +1726,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-callback-ref@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/331b432be1edc960ca148637ae6087220873ee828ceb13bd155926ef8f49e862812de5b379129f6aaefcd11be53715f3237e6caa9a33d9c0abfff43f3ba58938
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
@@ -1485,6 +1754,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-controllable-state@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/29b069dbf09e48bca321af6272574ad0fc7283174e7d092731a10663fe00c0e6b4bde5e1b5ea67725fe48dcbe8026e7ff0d69d42891c62cbb9ca408498171fbe
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-controllable-state@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-controllable-state@npm:1.1.0"
@@ -1500,6 +1785,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-escape-keydown@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/3c94c78902dcb40b60083ee2184614f45c95a189178f52d89323b467bd04bcf5fdb1bc4d43debecd7f0b572c3843c7e04edbcb56f40a4b4b43936fb2770fb8ad
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-escape-keydown@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-escape-keydown@npm:1.1.0"
@@ -1515,6 +1816,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-layout-effect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/13cd0c38395c5838bc9a18238020d3bcf67fb340039e6d1cbf438be1b91d64cf6900b78121f3dc9219faeb40dcc7b523ce0f17e4a41631655690e5a30a40886a
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-layout-effect@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-layout-effect@npm:1.1.0"
@@ -3351,6 +3667,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cmdk@npm:1.0.0":
+  version: 1.0.0
+  resolution: "cmdk@npm:1.0.0"
+  dependencies:
+    "@radix-ui/react-dialog": "npm:1.0.5"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 10c0/bf1c9cfce46f2f507ab95735fa08c9aa27e76ecdff87720cc51ae89dbf4814b7559668458f66ff4c3932a88a6b9d8817be05c3cc4ff98bc40c3645acf4a97376
+  languageName: node
+  linkType: hard
+
 "code-excerpt@npm:^3.0.0":
   version: 3.0.0
   resolution: "code-excerpt@npm:3.0.0"
@@ -4502,12 +4831,13 @@ __metadata:
     "@radix-ui/react-accordion": "npm:^1.1.2"
     "@radix-ui/react-aspect-ratio": "npm:^1.0.3"
     "@radix-ui/react-avatar": "npm:^1.0.4"
-    "@radix-ui/react-dialog": "npm:^1.0.5"
+    "@radix-ui/react-dialog": "npm:^1.1.2"
     "@radix-ui/react-dropdown-menu": "npm:^2.0.6"
     "@radix-ui/react-label": "npm:^2.0.2"
-    "@radix-ui/react-popover": "npm:^1.0.7"
+    "@radix-ui/react-popover": "npm:^1.1.2"
     "@radix-ui/react-select": "npm:^2.1.2"
-    "@radix-ui/react-slot": "npm:^1.0.2"
+    "@radix-ui/react-separator": "npm:^1.1.0"
+    "@radix-ui/react-slot": "npm:^1.1.0"
     "@radix-ui/react-tabs": "npm:^1.0.4"
     "@radix-ui/react-toast": "npm:^1.1.5"
     "@radix-ui/react-tooltip": "npm:^1.1.3"
@@ -4529,6 +4859,7 @@ __metadata:
     canvas: "npm:^2.11.2"
     class-variance-authority: "npm:^0.7.0"
     clsx: "npm:^2.1.1"
+    cmdk: "npm:1.0.0"
     country-emoji: "npm:^1.5.6"
     date-fns: "npm:^3.6.0"
     eslint: "npm:^9.12.0"
@@ -7625,7 +7956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-remove-scroll-bar@npm:^2.3.6":
+"react-remove-scroll-bar@npm:^2.3.3, react-remove-scroll-bar@npm:^2.3.6":
   version: 2.3.6
   resolution: "react-remove-scroll-bar@npm:2.3.6"
   dependencies:
@@ -7641,6 +7972,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll@npm:2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.3"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/4952657e6a7b9d661d4ad4dfcef81b9c7fa493e35164abff99c35c0b27b3d172ef7ad70c09416dc44dd14ff2e6b38a5ec7da27e27e90a15cbad36b8fd2fd8054
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll@npm:2.6.0":
   version: 2.6.0
   resolution: "react-remove-scroll@npm:2.6.0"
diff --git a/mobile/app/question/[questionId].tsx b/mobile/app/question/[questionId].tsx
index dc1351fe..932a9e38 100644
--- a/mobile/app/question/[questionId].tsx
+++ b/mobile/app/question/[questionId].tsx
@@ -22,12 +22,13 @@ import {
   useUpvoteQuestion,
 } from "@/services/api/programmingForumComponents";
 import useAuthStore from "@/services/auth";
-import { Link, useLocalSearchParams } from "expo-router";
+import { Link, useLocalSearchParams, useRouter } from "expo-router";
 import { Flag, MessageSquare, ThumbsUp, Trash } from "lucide-react-native";
 import { useState } from "react";
 import { ScrollView, View } from "react-native";
 export default function QuestionPage() {
   const { questionId } = useLocalSearchParams();
+  const router = useRouter();
 
   const toast = useToast();
   const {
@@ -230,6 +231,15 @@ export default function QuestionPage() {
       </View>
 
       <Text className="text-2xl font-bold">Answers</Text>
+
+      <Button
+        onPress={() => {
+          router.push(`/question/${question.id}/answer`);
+        }}
+      >
+        <ButtonText>Write a new answer</ButtonText>
+      </Button>
+
       {questionId && <Answers questionId={Number(questionId)} />}
     </ScrollView>
   );
diff --git a/mobile/app/question/[questionId]/answer.tsx b/mobile/app/question/[questionId]/answer.tsx
new file mode 100644
index 00000000..204d5e5d
--- /dev/null
+++ b/mobile/app/question/[questionId]/answer.tsx
@@ -0,0 +1,87 @@
+import { Input, InputField } from "@/components/ui/input";
+import { FullscreenLoading } from "@/components/FullscreenLoading";
+import ErrorAlert from "@/components/ErrorAlert";
+import { useCreateAnswer, useCreateQuestion, useSearchTags } from "@/services/api/programmingForumComponents";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import useAuthStore from "@/services/auth";
+import { useState } from "react";
+import {
+  Button,
+  ButtonText,
+  HStack,
+  Text,
+  View,
+  VStack,
+  Icon,
+  Textarea,
+  TextareaInput,
+} from "@/components/ui";
+import { X } from "lucide-react-native";
+
+export default function NewAnswerPage() {
+  const { questionId } = useLocalSearchParams<{ questionId: string }>();
+  const { mutateAsync: createAnswer, status, error } = useCreateAnswer();
+  const router = useRouter();
+
+  const [content, setContent] = useState("");
+  const contentLength = content.length;
+  const token = useAuthStore((state) => state.token);
+
+  if (!token) {
+    return (
+      <ErrorAlert
+        error={{
+          status: 403,
+          payload: { message: "You must be logged in to create an answer." },
+        }}
+      />
+    );
+  }
+
+  const handleSubmit = async () => {
+    const response = await createAnswer({
+      body: {
+        content,
+      },
+      pathParams: {
+        questionId: Number(questionId),
+      },
+    });
+
+    if (response.status === 201) {
+      console.log("Answer created successfully");
+      router.push(`/question/${questionId}`);
+    } else {
+      console.error("Failed to create answer");
+      console.error(response);
+    }
+
+  };
+
+  if (status === "pending") {
+    return <FullscreenLoading overlay />;
+  }
+
+  return (
+    <VStack style={{ gap: 16, flex: 1, padding: 32, marginVertical: 24 }}>
+      <Button onPress={() => router.back()} style={{ alignSelf: "flex-start" }} variant={"outline"} size="sm">
+        <Icon as={X} />
+      </Button>
+      <View style={{ gap: 16 }} />
+      <Text style={{ fontSize: 20 }}>Write your answer</Text>
+      <Textarea>
+        <TextareaInput
+          value={content}
+          onChangeText={setContent}
+          placeholder="Write your answer here..."
+          maxLength={1000}
+        />
+      </Textarea>
+      <Text>{contentLength} / 1000</Text>
+      <Button onPress={handleSubmit} disabled={contentLength === 0} style={{ alignSelf: "flex-end" }}>
+        <ButtonText>Submit</ButtonText>
+      </Button>
+    </VStack>
+  );
+
+}
\ No newline at end of file
diff --git a/mobile/components/ContentWithSnippets.tsx b/mobile/components/ContentWithSnippets.tsx
index 552703e1..938de201 100644
--- a/mobile/components/ContentWithSnippets.tsx
+++ b/mobile/components/ContentWithSnippets.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { CodeSnippet } from "./CodeSnippet";
 import { Text } from "./ui";
+
 interface ContentWithSnippetsProps {
   content: string;
 }
@@ -51,12 +52,14 @@ export const ContentWithSnippets: React.FC<ContentWithSnippetsProps> = ({
           <CodeSnippet key={index} code={part.code} language={part.language} />
         );
       }
-      return (
-        <Text className="font-mono" key={index}>
-          {part.code}
-        </Text>
-      );
-      return <Text key={index}>{part.content}</Text>;
+      if (part.type === "text") {
+        return (
+          <Text key={index} className="font-mono">
+            {part.content}
+          </Text>
+        );
+      }
+      return null;
     });
   }, [content]);