diff --git a/.github/workflows/prod_deploy.yml b/.github/workflows/prod_deploy.yml
index e6463904..9094564d 100644
--- a/.github/workflows/prod_deploy.yml
+++ b/.github/workflows/prod_deploy.yml
@@ -20,10 +20,10 @@ jobs:
 
       # Build a Docker image of the application and tag the image with the $GITHUB_SHA.
       - name: Build backend image
-        run: docker build -t registry.digitalocean.com/programming-languages/backend:$(echo $GITHUB_SHA | head -c7) ./backend
+        run: docker build -t registry.digitalocean.com/programming-languages-2/backend:$(echo $GITHUB_SHA | head -c7) ./backend
 
       - name: Build web image
-        run: docker build -t registry.digitalocean.com/programming-languages/web:$(echo $GITHUB_SHA | head -c7) ./frontend
+        run: docker build -t registry.digitalocean.com/programming-languages-2/web:$(echo $GITHUB_SHA | head -c7) ./frontend
 
       - name: Log in to DigitalOcean Container Registry with short-lived credentials
         run: doctl registry login --expiry-seconds 1200
@@ -31,23 +31,26 @@ jobs:
       # Push the Docker image to registry
 
       - name: Push backend image
-        run: docker push registry.digitalocean.com/programming-languages/backend:$(echo $GITHUB_SHA | head -c7)
+        run: docker push registry.digitalocean.com/programming-languages-2/backend:$(echo $GITHUB_SHA | head -c7)
 
       - name: Push web image
-        run: docker push registry.digitalocean.com/programming-languages/web:$(echo $GITHUB_SHA | head -c7)
+        run: docker push registry.digitalocean.com/programming-languages-2/web:$(echo $GITHUB_SHA | head -c7)
 
       # tag as latest
 
       - name: Tag backend image
-        run: docker tag registry.digitalocean.com/programming-languages/backend:$(echo $GITHUB_SHA | head -c7) registry.digitalocean.com/programming-languages/backend:latest
+        run: docker tag registry.digitalocean.com/programming-languages-2/backend:$(echo $GITHUB_SHA | head -c7) registry.digitalocean.com/programming-languages-2/backend:latest
 
       - name: Tag web image
-        run: docker tag registry.digitalocean.com/programming-languages/web:$(echo $GITHUB_SHA | head -c7) registry.digitalocean.com/programming-languages/web:latest
+        run: docker tag registry.digitalocean.com/programming-languages-2/web:$(echo $GITHUB_SHA | head -c7) registry.digitalocean.com/programming-languages-2/web:latest
 
       # Push the Docker image to registry
 
       - name: Push backend image
-        run: docker push registry.digitalocean.com/programming-languages/backend:latest
+        run: docker push registry.digitalocean.com/programming-languages-2/backend:latest
 
       - name: Push web image
-        run: docker push registry.digitalocean.com/programming-languages/web:latest
\ No newline at end of file
+        run: docker push registry.digitalocean.com/programming-languages-2/web:latest
+
+      - name: Create deployment again to ensure both images are up to date
+        run: doctl apps create-deployment 58cc1048-2af2-42f8-a71f-5d1085113742
\ No newline at end of file
diff --git a/README.md b/README.md
index a603425d..e19aa899 100644
--- a/README.md
+++ b/README.md
@@ -114,24 +114,24 @@ docker compose build
 
 ```bash
 # for prod
-docker tag bounswe2024group1-451-web:latest registry.digitalocean.com/programming-languages/web:latest
-docker tag bounswe2024group1-451-backend:latest registry.digitalocean.com/programming-languages/backend:latest
+docker tag bounswe2024group1-451-web:latest registry.digitalocean.com/programming-languages-2/web:latest
+docker tag bounswe2024group1-451-backend:latest registry.digitalocean.com/programming-languages-2/backend:latest
 
 # for staging
-docker tag bounswe2024group1-451-web:latest registry.digitalocean.com/programming-languages/web:staging
-docker tag bounswe2024group1-451-backend:latest registry.digitalocean.com/programming-languages/backend:staging
+docker tag bounswe2024group1-451-web:latest registry.digitalocean.com/programming-languages-2/web:staging
+docker tag bounswe2024group1-451-backend:latest registry.digitalocean.com/programming-languages-2/backend:staging
 ```
 
 3. Push images to the registry.
 
 ```bash
 # for prod
-docker push registry.digitalocean.com/programming-languages/web:latest
-docker push registry.digitalocean.com/programming-languages/backend:latest
+docker push registry.digitalocean.com/programming-languages-2/web:latest
+docker push registry.digitalocean.com/programming-languages-2/backend:latest
 
 # for staging
-docker push registry.digitalocean.com/programming-languages/web:staging
-docker push registry.digitalocean.com/programming-languages/backend:staging
+docker push registry.digitalocean.com/programming-languages-2/web:staging
+docker push registry.digitalocean.com/programming-languages-2/backend:staging
 ```
 
 This will trigger a deployment on the DigitalOcean backend.
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 aa0d72a7..0b13aa85 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Controllers/TagController.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Controllers/TagController.java
@@ -12,6 +12,7 @@
 import com.group1.programminglanguagesforum.Exceptions.UnauthorizedAccessException;
 import com.group1.programminglanguagesforum.Services.TagService;
 import com.group1.programminglanguagesforum.Services.UserContextService;
+import com.group1.programminglanguagesforum.Services.UserService;
 import com.group1.programminglanguagesforum.Util.ApiResponseBuilder;
 
 import jakarta.persistence.EntityExistsException;
@@ -26,6 +27,7 @@
 
 import java.util.Arrays;
 import java.util.NoSuchElementException;
+import java.util.Optional;
 
 
 @RestController
@@ -35,6 +37,7 @@ public class TagController extends BaseController {
     
     private final TagService tagService;
     private final UserContextService userContextService;
+    private final UserService userService;
 
     @GetMapping(value = EndpointConstants.TagEndpoints.SEARCH)
     public ResponseEntity<GenericApiResponse<TagSearchResponseDto>> tagSearch(
@@ -94,6 +97,13 @@ public ResponseEntity<GenericApiResponse<GetTagDetailsResponseDto>> getTagDetail
     @PostMapping(value = EndpointConstants.TagEndpoints.BASE_PATH)
     public ResponseEntity<GenericApiResponse<GetTagDetailsResponseDto>> createTag(@RequestBody CreateTagRequestDto dto){
         try{
+            User user = userContextService.getCurrentUser();
+            if(userService.calculateReputation(user) < 50){
+                return ExceptionResponseHandler.IllegalArgumentException(
+                        new IllegalArgumentException("User does not have enough reputation to create a tag which should be at least 50")
+                );
+            }
+
             GetTagDetailsResponseDto tagDetails = tagService.createTag(dto);
             GenericApiResponse<GetTagDetailsResponseDto> response = GenericApiResponse.<GetTagDetailsResponseDto>builder()
                     .status(201)
@@ -115,6 +125,8 @@ public ResponseEntity<GenericApiResponse<GetTagDetailsResponseDto>> createTag(@R
                     .build();
             ApiResponseBuilder.buildErrorResponse(GetTagDetailsResponseDto.class, "Invalid tag type", 400, errorResponse);
             return buildResponse(response, HttpStatus.BAD_REQUEST);
+        } catch (UnauthorizedAccessException e) {
+            return ExceptionResponseHandler.UnauthorizedAccessException(e);
         }
 
     }
diff --git a/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/TagRepository.java b/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/TagRepository.java
index da282981..df4999eb 100644
--- a/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/TagRepository.java
+++ b/backend/src/main/java/com/group1/programminglanguagesforum/Repositories/TagRepository.java
@@ -14,6 +14,10 @@
 @Repository
 public interface TagRepository extends JpaRepository<Tag,Long> {
     List<Tag> findAllByIdIn(List<Long> ids);
+    @Query("SELECT t FROM Tag t " +
+            "JOIN Question q ON t MEMBER OF q.tags " +
+            "GROUP BY t.id " +
+            "ORDER BY COUNT(q.id) DESC")
 
     Page<Tag> findTagsByTagNameContainingIgnoreCase(String tagName, Pageable pageable);
     @Query("SELECT t FROM Tag t JOIN t.followers u WHERE u.id = :userId")
diff --git a/frontend/src/components/AnswerCard.tsx b/frontend/src/components/AnswerCard.tsx
index 10b7fcce..a5736d3e 100644
--- a/frontend/src/components/AnswerCard.tsx
+++ b/frontend/src/components/AnswerCard.tsx
@@ -24,7 +24,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
   author,
 }) => {
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-6">
         <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}
@@ -49,7 +49,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
           <Link to={`/users/${author.id}`} className="h-10 w-10">
             <img
               src={author.profilePicture}
-              alt={author.name}
+              alt={"Profile picture"}
               className="rounded-full object-cover"
             />
           </Link>
diff --git a/frontend/src/components/AnswerItem.tsx b/frontend/src/components/AnswerItem.tsx
index 207badc0..9ffe68fc 100644
--- a/frontend/src/components/AnswerItem.tsx
+++ b/frontend/src/components/AnswerItem.tsx
@@ -21,7 +21,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
   const { token } = useAuthStore();
 
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-4">
         <ContentWithSnippets content={answer.content} />
         <div className="flex items-center justify-between">
@@ -64,7 +64,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
                   answer.author?.profilePicture ||
                   "https://placehold.co/100x100"
                 }
-                alt={answer.author?.name}
+                alt={"Profile picture"}
                 className="h-8 w-8 rounded-full object-cover"
               />
               <span className="text-sm font-medium">{answer.author?.name}</span>
diff --git a/frontend/src/components/CodeSnippet.tsx b/frontend/src/components/CodeSnippet.tsx
index d5a734de..b59b6162 100644
--- a/frontend/src/components/CodeSnippet.tsx
+++ b/frontend/src/components/CodeSnippet.tsx
@@ -5,7 +5,7 @@ import { useExecuteCode } from "@/services/api/programmingForumComponents";
 import { CodeExecution } from "@/services/api/programmingForumSchemas";
 import React from "react";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { a11yLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 interface CodeSnippetProps {
   code: string;
@@ -37,15 +37,15 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = ({ code, language }) => {
 
   return (
     <div className="not-prose relative flex flex-col gap-2 overflow-hidden rounded-xl border border-gray-400 bg-gray-100 p-4">
-      <h4 className="text-sm font-bold">
+      <h1 className="text-sm font-bold">
         {languageUserFriendlyName[
           language.replace("-exec", "") as keyof typeof languageUserFriendlyName
         ] ?? "Unknown"}{" "}
         Code Snippet
-      </h4>
+      </h1>
       <SyntaxHighlighter
         language={language.replace("-exec", "")}
-        style={docco}
+        style={a11yLight}
         PreTag={({ children, ...rest }) => {
           return (
             <div {...rest}>
diff --git a/frontend/src/components/DifficultyBar.tsx b/frontend/src/components/DifficultyBar.tsx
index bafd92b1..80f6125b 100644
--- a/frontend/src/components/DifficultyBar.tsx
+++ b/frontend/src/components/DifficultyBar.tsx
@@ -107,7 +107,7 @@ export const DifficultyBar: React.FC<DifficultyBarProps> = ({
         {/* Difficulty Bar */}
         <div>
           <h2 className="mb-2 text-lg font-semibold">
-            The community finds this question <strong>{getHighestVotedDifficulty()}</strong> difficulty.
+            The community finds this question: <strong>{getHighestVotedDifficulty()}</strong> difficulty.
           </h2>
           <div className="text-sm text-gray-600 mb-2">
             <span>Easy: {localCounts.easy} votes</span>,{" "}
diff --git a/frontend/src/components/DifficultyFilter.tsx b/frontend/src/components/DifficultyFilter.tsx
index aabdba6c..d3e01181 100644
--- a/frontend/src/components/DifficultyFilter.tsx
+++ b/frontend/src/components/DifficultyFilter.tsx
@@ -21,7 +21,7 @@ export function DifficultyFilter({ value, onChange }: DifficultyFilterProps) {
         onChange(val === "all" ? undefined : (val as DifficultyLevel))
       }
     >
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-[180px]" aria-label="Filter questions by difficulty">
         <SelectValue placeholder="Filter by difficulty" />
       </SelectTrigger>
       <SelectContent>
diff --git a/frontend/src/components/ExerciseCard.tsx b/frontend/src/components/ExerciseCard.tsx
index de717f0e..221a8db6 100644
--- a/frontend/src/components/ExerciseCard.tsx
+++ b/frontend/src/components/ExerciseCard.tsx
@@ -20,7 +20,7 @@ export const ExerciseCard: React.FC<ExerciseCardProps> = ({
   link,
 }) => {
   return (
-    <Card className="flex flex-1 border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="flex flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm">
       <div className="flex flex-col gap-6">
         <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}
diff --git a/frontend/src/components/HighlightedQuestionCard.tsx b/frontend/src/components/HighlightedQuestionCard.tsx
index 8926b146..3d9214e8 100644
--- a/frontend/src/components/HighlightedQuestionCard.tsx
+++ b/frontend/src/components/HighlightedQuestionCard.tsx
@@ -54,7 +54,7 @@ export const HighlightedQuestionCard: React.FC<Partial<QuestionSummary>> = ({
           )}
           <Link
             to={`/question/${id}`}
-            className="flex items-center text-sm font-medium text-gray-800 hover:underline"
+            className="flex items-center text-sm font-medium text-gray-800 hover:underline p-2"
           >
             Go to question
             <ArrowRight className="ml-1 h-4 w-4" />
diff --git a/frontend/src/components/QuestionCard.tsx b/frontend/src/components/QuestionCard.tsx
index b88a32bc..6e674181 100644
--- a/frontend/src/components/QuestionCard.tsx
+++ b/frontend/src/components/QuestionCard.tsx
@@ -27,7 +27,7 @@ export const QuestionCard = React.forwardRef<HTMLDivElement, QuestionCardProps>(
   ({ id, title, content, votes, answerCount, author, difficulty }, ref) => {
     return (
       <Card
-        className="flex flex-1 border-none bg-neutral-150 px-6 py-8 shadow-sm"
+        className="flex flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm"
         ref={ref}
       >
         <div className="flex flex-col gap-6">
@@ -65,7 +65,7 @@ export const QuestionCard = React.forwardRef<HTMLDivElement, QuestionCardProps>(
             )}
             <Link
               to={`/question/${id}`}
-              className="flex items-center text-sm font-medium text-gray-800 hover:underline"
+              className="flex items-center text-sm font-medium text-gray-800 hover:underline p-2"
             >
               Go to question
               <ArrowRight className="ml-1 h-4 w-4" />
diff --git a/frontend/src/components/Tag.tsx b/frontend/src/components/Tag.tsx
index 4af752b7..d12ea132 100644
--- a/frontend/src/components/Tag.tsx
+++ b/frontend/src/components/Tag.tsx
@@ -45,7 +45,7 @@ export const Tag = ({
             )}
             <Link
               to={`/tag/${tagId}`}
-              className="text-sm font-medium text-blue-500 hover:underline"
+              className="text-sm font-medium text-blue-700 hover:underline"
             >
               See all questions →
             </Link>
diff --git a/frontend/src/components/TagCard.tsx b/frontend/src/components/TagCard.tsx
index a186610f..da470d9c 100644
--- a/frontend/src/components/TagCard.tsx
+++ b/frontend/src/components/TagCard.tsx
@@ -12,13 +12,13 @@ export const TagCard = React.forwardRef<HTMLDivElement, TagCardProps>(
   ({ tag }, ref) => {
     return (
       <Card
-        className="flex-1 border-none bg-neutral-150 px-6 py-8 shadow-sm"
+        className="flex-1 border-none #e5e5e5 px-6 py-8 shadow-sm"
         ref={ref}
       >
         <div className="flex flex-col gap-6">
-          <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
+          <h1 className="line-clamp-2 text-xl font-semibold text-gray-800">
             {tag.name}
-          </h3>
+          </h1>
           <div className="flex items-start gap-2">
             <p className="line-clamp-3 text-sm font-light text-gray-800">
               {tag.description}
diff --git a/frontend/src/routes/create-question.tsx b/frontend/src/routes/create-question.tsx
index 63acc598..9b509f46 100644
--- a/frontend/src/routes/create-question.tsx
+++ b/frontend/src/routes/create-question.tsx
@@ -282,15 +282,19 @@ export default function QuestionCreationPage() {
             name="difficulty"
             render={({ field }) => (
               <FormItem>
+                <label htmlFor="difficulty-select" className="font-semibold mb-2 block">
+                  Difficulty Level
+                </label>
                 <FormControl>
                   <select
+                    id="difficulty-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>
+                    <option value="HARD">Hard</option>  
                   </select>
                 </FormControl>
                 <FormMessage />
diff --git a/frontend/src/routes/feed.tsx b/frontend/src/routes/feed.tsx
index f95e1031..9020665f 100644
--- a/frontend/src/routes/feed.tsx
+++ b/frontend/src/routes/feed.tsx
@@ -79,7 +79,7 @@ export const Feed = () => {
       <section className="mb-12">
         <div className="flex items-center justify-between">
           <h2 className="text-2xl font-bold">Tags</h2>
-          <a href="/tags" className="text-red-500 hover:underline">
+          <a href="/tags" className="text-red-700 hover:underline">
             See all →
           </a>
         </div>
diff --git a/frontend/src/routes/profile.tsx b/frontend/src/routes/profile.tsx
index 27858f73..13ef94f6 100644
--- a/frontend/src/routes/profile.tsx
+++ b/frontend/src/routes/profile.tsx
@@ -204,7 +204,7 @@ export default function Profile() {
                   size="icon"
                   className="rounded-full bg-red-500 text-white"
                 >
-                  <Link to="/questions/new">
+                  <Link to="/questions/new" aria-label="Create New Question">
                     <Plus />
                   </Link>
                 </Button>
diff --git a/frontend/src/routes/question.tsx b/frontend/src/routes/question.tsx
index d7f28b5b..5d2f7c26 100644
--- a/frontend/src/routes/question.tsx
+++ b/frontend/src/routes/question.tsx
@@ -151,7 +151,7 @@ export default function QuestionPage() {
               src={
                 question.author.profilePicture || "https://placehold.co/640x640"
               }
-              alt={question.author.name + " profile picture"}
+              alt={"Profile picture"}
               className="h-8 w-8 rounded-full object-cover"
             />
             <span className="font-semibold">{question.author.name}</span>
diff --git a/frontend/src/routes/tag.tsx b/frontend/src/routes/tag.tsx
index a5d4b96e..97ef006d 100644
--- a/frontend/src/routes/tag.tsx
+++ b/frontend/src/routes/tag.tsx
@@ -102,7 +102,7 @@ export default function TagPage() {
       {tag.logoImage && (
         <img
           src={tag?.logoImage || "https://placehold.co/400x300"}
-          alt={`The logo image of ${tag.name}`}
+          alt={`${tag.name} logo`}
           title={`alt:The logo image of ${tag.name}`}
           className="h-48 w-full rounded-3xl object-contain lg:h-96"
         />
@@ -161,6 +161,7 @@ export default function TagPage() {
               to={tag.stackExchangeTag}
               className="flex items-center gap-2 text-sm font-semibold text-gray-500"
               target="_blank"
+              aria-label={`Visit Stack Exchange for ${tag.name}`}
             >
               Stack Exchange
             </Link>
@@ -177,15 +178,16 @@ export default function TagPage() {
       <div className="mt-4 flex flex-col gap-4 px-4 py-2">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <h3>Questions</h3>
+            <h1>Questions</h1>
             {!!token && (
               <Button
                 asChild
                 size="icon"
-                className="rounded-full bg-red-500 text-white"
+                className="rounded-full bg-red-700 text-white"
+                aria-label="Create a new question"
               >
                 <Link to={`/questions/new?tagIds=${tag.tagId}`}>
-                  <Plus />
+                  <Plus aria-hidden="true" />
                 </Link>
               </Button>
             )}
diff --git a/mobile/app/(tabs)/index.tsx b/mobile/app/(tabs)/index.tsx
index c84e47e4..60ef4433 100644
--- a/mobile/app/(tabs)/index.tsx
+++ b/mobile/app/(tabs)/index.tsx
@@ -1,9 +1,10 @@
 import { ScrollView, Text } from "react-native";
 
-import { Button, ButtonText, VStack } from "@/components/ui";
+import { Button, ButtonText, Divider, VStack } from "@/components/ui";
 import useAuthStore from "@/services/auth";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
+import { Feed } from "@/components/Feed";
 
 export default function HomeScreen() {
   const auth = useAuthStore();
@@ -45,6 +46,8 @@ export default function HomeScreen() {
             <ButtonText>Logout</ButtonText>
           </Button>
         )}
+        <Divider className="my-8" />
+        <Feed />
       </VStack>
     </ScrollView>
   );
diff --git a/mobile/app/question/[questionId].tsx b/mobile/app/question/[questionId].tsx
index 9d840ef9..7eb83e46 100644
--- a/mobile/app/question/[questionId].tsx
+++ b/mobile/app/question/[questionId].tsx
@@ -145,7 +145,7 @@ export default function QuestionPage() {
   }
 
   return (
-    <VStack className="flex-1 px-2 my-8">
+    <VStack className="flex-1 px-2 my-8 mt-8">
       <HStack className="flex items-center justify-between">
         <Button
           onPress={() => router.back()}
@@ -316,7 +316,7 @@ export default function QuestionPage() {
           </Text>
         </View>
 
-        <View className="rounded-lg bg-neutral-150 p-4">
+        <View className="rounded-lg #e5e5e5 p-4">
           <Text className="whitespace-pre-wrap">{question.content}</Text>
         </View>
 
diff --git a/mobile/app/tags/[tagId].tsx b/mobile/app/tags/[tagId].tsx
index e0f19855..a81a264a 100644
--- a/mobile/app/tags/[tagId].tsx
+++ b/mobile/app/tags/[tagId].tsx
@@ -1,6 +1,6 @@
 import ErrorAlert from "@/components/ErrorAlert";
 import { FullscreenLoading } from "@/components/FullscreenLoading";
-import { QuestionCard } from "@/components/QuestionCard";
+import { QuestionList } from "@/components/QuestionsList";
 import {
   Button,
   ButtonGroup,
@@ -9,14 +9,26 @@ import {
   Icon,
   Image,
   ScrollView,
+  Select,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectIcon,
+  SelectInput,
+  SelectItem,
+  SelectItemText,
+  SelectPortal,
+  SelectTrigger,
   Text,
   View,
   VStack,
 } from "@/components/ui";
 import { useGetTagDetails } from "@/services/api/programmingForumComponents";
+import { DifficultyLevel } from "@/services/api/programmingForumSchemas";
 import useAuthStore from "@/services/auth";
-import { Link, useLocalSearchParams } from "expo-router";
-import { Plus } from "lucide-react-native";
+import { Link, router, useLocalSearchParams } from "expo-router";
+import { ArrowLeftIcon, ChevronDownIcon, Plus } from "lucide-react-native";
 import { useState } from "react";
 
 export default function TagPage() {
@@ -34,8 +46,7 @@ export default function TagPage() {
   const tag = data?.data;
   const token = useAuthStore((s) => s.token);
   const [tab, setTab] = useState<"top-rated" | "recent">("top-rated");
-
-  const highlightedQuestions = tag?.relatedQuestions;
+  const [difficultyFilter, setDifficultyFilter] = useState<DifficultyLevel>();
 
   if (isLoading) {
     return <FullscreenLoading overlay />;
@@ -56,104 +67,101 @@ export default function TagPage() {
     );
   }
 
-  // TODO: fix this when backend catches up
-  const questions = tag?.relatedQuestions || [];
-
   return (
-    <ScrollView contentContainerStyle={{ paddingVertical: 32, flexGrow: 1 }}>
-      <View style={{ paddingHorizontal: 16, gap: 16 }}>
-        <HStack
-          style={{ alignItems: "center", justifyContent: "space-between" }}
+    <VStack className="flex-1 px-2 my-8 mt-8">
+      <HStack className="flex items-center justify-between">
+        <Button
+          onPress={() => router.back()}
+          className="self-start mt-4 ml-2"
+          variant={"outline"}
+          size="sm"
         >
-          <Text className="text-2xl font-bold">{tag.name}</Text>
-        </HStack>
-        <Image
-          source={{ uri: tag?.logoImage || "https://placehold.co/400x300" }}
-          alt={tag.name}
-          style={{
-            height: 192,
-            width: "100%",
-            borderRadius: 24,
-            resizeMode: "contain",
-          }}
-        />
-        <Text>{tag.description}</Text>
+          <Icon as={ArrowLeftIcon} />
+        </Button>
+      </HStack>
+      <ScrollView contentContainerStyle={{ paddingVertical: 32, flexGrow: 1 }}>
+        <View style={{ paddingHorizontal: 16, gap: 16 }}>
+          <HStack
+            style={{ alignItems: "center", justifyContent: "space-between" }}
+          >
+            <Text className="text-2xl font-bold">{tag.name}</Text>
+          </HStack>
+          <Image
+            source={{ uri: tag?.logoImage || "https://placehold.co/400x300" }}
+            alt={tag.name}
+            style={{
+              height: 192,
+              width: "100%",
+              borderRadius: 24,
+              resizeMode: "contain",
+            }}
+          />
+          <Text>{tag.description}</Text>
 
-        <VStack style={{ marginTop: 16, gap: 16 }}>
-          <HStack style={{ alignItems: "center", gap: 16 }}>
-            <Text style={{ fontSize: 20, fontWeight: "600" }}>Questions</Text>
-            {!!token && (
-              <Link href={`/question/new?tagIds=${tag.tagId}`} asChild>
+          <VStack style={{ marginTop: 16, gap: 16 }}>
+            <HStack style={{ alignItems: "center", gap: 16 }}>
+              <Text style={{ fontSize: 20, fontWeight: "600" }}>Questions</Text>
+              {!!token && (
+                <Link href={`/question/new?tagIds=${tag.tagId}`} asChild>
+                  <Button
+                    size="md"
+                    style={{ borderRadius: 9999, backgroundColor: "#ef4444" }}
+                  >
+                    <Icon as={Plus} color="white" />
+                  </Button>
+                </Link>
+              )}
+            </HStack>
+            <HStack className="flex items-center justify-between">
+              <ButtonGroup className="flex items-center gap-2">
                 <Button
-                  size="md"
-                  style={{ borderRadius: 9999, backgroundColor: "#ef4444" }}
+                  variant={tab === "top-rated" ? "solid" : "outline"}
+                  onPress={() => setTab("top-rated")}
                 >
-                  <Icon as={Plus} color="white" />
+                  <ButtonText>Top-Rated</ButtonText>
                 </Button>
-              </Link>
-            )}
-          </HStack>
-          <ButtonGroup>
-            <Button
-              variant={tab === "top-rated" ? "solid" : "outline"}
-              onPress={() => setTab("top-rated")}
-            >
-              <ButtonText>Top-Rated</ButtonText>
-            </Button>
-            <Button
-              variant={tab === "recent" ? "solid" : "outline"}
-              onPress={() => setTab("recent")}
-            >
-              <ButtonText>Recent</ButtonText>
-            </Button>
-          </ButtonGroup>
+                <Button
+                  variant={tab === "recent" ? "solid" : "outline"}
+                  onPress={() => setTab("recent")}
+                >
+                  <ButtonText>Recent</ButtonText>
+                </Button>
+              </ButtonGroup>
+
+              <Select
+                className="w-1/3 ml-auto"
+                selectedValue={difficultyFilter}
+                onValueChange={(value) => setDifficultyFilter(value as DifficultyLevel)}
+              >
+                <SelectTrigger variant="outline" size="md">
+                  <SelectInput placeholder="Difficulty" />
+                  <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                </SelectTrigger>
+                <SelectPortal>
+                  <SelectBackdrop />
+                  <SelectContent>
+                    <SelectDragIndicatorWrapper>
+                      <SelectDragIndicator />
+                    </SelectDragIndicatorWrapper>
+                    <SelectItem label="All" value="" />
+                    <SelectItem label="Easy" value="EASY" />
+                    <SelectItem label="Medium" value="MEDIUM" />
+                    <SelectItem label="Hard" value="HARD" />
+                  </SelectContent>
+                </SelectPortal>
+              </Select>
+            </HStack>
 
-          {highlightedQuestions?.map((question) => (
-            <QuestionCard
-              key={question.id}
-              id={String(question.id)}
-              title={question.title}
-              content={question.content}
-              votes={question.likeCount}
-              answerCount={question.commentCount}
-              author={question.author}
-              highlighted={true}
-            />
-          ))}
 
-          {tab === "top-rated" ? (
-            <View style={{ gap: 16 }}>
-              {questions &&
-                questions.map((question) => (
-                  <QuestionCard
-                    key={question.id}
-                    id={String(question.id)}
-                    title={question.title}
-                    content={question.content}
-                    votes={question.likeCount}
-                    answerCount={question.commentCount}
-                    author={question.author}
-                  />
-                ))}
-            </View>
-          ) : (
-            <View style={{ gap: 16 }}>
-              {questions &&
-                questions.map((question) => (
-                  <QuestionCard
-                    key={question.id}
-                    id={String(question.id)}
-                    title={question.title}
-                    content={question.content}
-                    votes={question.likeCount}
-                    answerCount={question.commentCount}
-                    author={question.author}
-                  />
-                ))}
-            </View>
-          )}
-        </VStack>
-      </View>
-    </ScrollView>
+            <QuestionList 
+              searchQueryParams=""
+              tagFilter={tag.tagId}
+              {...(difficultyFilter ? { difficultyFilter } : {})}
+              sortBy={tab === "top-rated" ? "TOP_RATED" : "RECENT"}
+             />
+          </VStack>
+        </View>
+      </ScrollView>
+    </VStack>
   );
 }
diff --git a/mobile/components/AnswerCard.tsx b/mobile/components/AnswerCard.tsx
index 760e3300..fb9864c7 100644
--- a/mobile/components/AnswerCard.tsx
+++ b/mobile/components/AnswerCard.tsx
@@ -26,7 +26,7 @@ export const AnswerCard: React.FC<AnswerCardProps> = ({
   author,
 }) => {
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <View className="flex flex-col gap-6">
         <Text className="line-clamp-2 text-xl font-semibold text-gray-800">
           {title}
diff --git a/mobile/components/AnswerItem.tsx b/mobile/components/AnswerItem.tsx
index 6037089c..e0d173f8 100644
--- a/mobile/components/AnswerItem.tsx
+++ b/mobile/components/AnswerItem.tsx
@@ -23,7 +23,7 @@ export const AnswerItem: React.FC<AnswerItemProps> = ({
   const { token } = useAuthStore();
 
   return (
-    <Card className="border-none bg-neutral-150 px-6 py-8 shadow-sm">
+    <Card className="border-none #e5e5e5 px-6 py-8 shadow-sm">
       <View className="flex flex-col gap-4">
         <ContentWithSnippets content={answer.content} />
         <HStack className="flex items-center justify-between">
diff --git a/mobile/components/Feed.tsx b/mobile/components/Feed.tsx
new file mode 100644
index 00000000..1e213b43
--- /dev/null
+++ b/mobile/components/Feed.tsx
@@ -0,0 +1,17 @@
+import { TagList } from "@/components/TagList";
+import { Divider, Text, VStack } from "@/components/ui";
+import { QuestionList } from "./QuestionsList";
+import { Divide } from "lucide-react-native";
+
+export const Feed = () => {
+
+  return (
+    <VStack className="gap-8">
+      <Text className="text-2xl font-bold">Tags</Text>
+      <TagList searchQueryParams="" pagesize={3} />
+      <Divider />
+      <Text className="text-2xl font-bold">Latest Questions</Text>
+      <QuestionList pageSize={3} />
+    </VStack>
+  );
+};
diff --git a/mobile/components/QuestionCard.tsx b/mobile/components/QuestionCard.tsx
index d597697f..9e218b0a 100644
--- a/mobile/components/QuestionCard.tsx
+++ b/mobile/components/QuestionCard.tsx
@@ -1,15 +1,8 @@
-import { Icon, Image, Text } from "@/components/ui";
-import { Card } from "@/components/ui/card";
+import { Card, HStack, Icon, Image, Text, View } from "@/components/ui";
 import { DifficultyLevel } from "@/services/api/programmingForumSchemas";
 import { Link } from "expo-router";
-import {
-  ArrowRight,
-  MessageSquare,
-  Star,
-  StarsIcon,
-} from "lucide-react-native";
+import { ArrowRight, MessageSquare, Star, StarsIcon } from "lucide-react-native";
 import React from "react";
-import { View } from "react-native";
 
 interface QuestionCardProps {
   id: string;
@@ -25,6 +18,7 @@ interface QuestionCardProps {
   };
   highlighted?: boolean;
 }
+
 const capitalizeString = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 };
@@ -41,15 +35,44 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
 }) => {
   return (
     <Card
-      className={`px-6 py-8 shadow-sm ${
+      className={`rounded-lg border-none text-card-foreground flex flex-1 px-6 py-8 shadow-sm ${
         highlighted ? "bg-blue-100 border-blue-500" : "bg-neutral-150"
       }`}
     >
       <View className="flex flex-col gap-6">
-        {highlighted && (
-          <Text className="text-xs font-semibold text-blue-700">
-            Beginner Friendly
-          </Text>
+        {(highlighted || answerCount === 0) && (
+          <HStack className="gap-4">
+            {highlighted && (
+              <Text className="text-xs font-semibold text-blue-700 bg-blue-300 p-1 rounded-lg">
+                Beginner Friendly
+              </Text>
+            )}
+            
+            {/* Unanswered notification with background */}
+            {answerCount === 0 && (
+              <Text className="text-xs font-semibold text-red-600 bg-red-200 p-1 rounded-lg">
+                Unanswered
+              </Text>
+            )}
+          </HStack>
+          )
+        }
+
+        {author && (
+          <HStack className="flex items-center gap-2">
+            <Link href={`/users/${author.id}`} className="h-10 w-10">
+              <Image
+                source={{
+                  uri: author.profilePicture || "https://placeholder.com/100",
+                }}
+                alt={author.name || "Author"}
+                className="h-full w-full rounded-full object-cover"
+              />
+            </Link>
+            <Link href={`/users/${author.id}`} className="text-sm font-semibold">
+              {author?.name}
+            </Link>
+          </HStack>
         )}
 
         <Text
@@ -66,7 +89,7 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
         >
           {content}
         </Text>
-        <View className="flex flex-col gap-3 text-xs text-gray-700">
+        <HStack className="flex flex-row gap-3 text-xs text-gray-700 justify-center items-center">
           <View className="flex items-center gap-1">
             <Star className={`h-4 w-4 ${highlighted ? "text-blue-600" : ""}`} />
             <Text>{votes} votes</Text>
@@ -83,20 +106,12 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({
               <Text>{capitalizeString(difficulty)}</Text>
             </View>
           )}
-        </View>
+        </HStack>
+
         <View className="flex items-center justify-between">
-          {author && (
-            <Link href={`/users/${author.id}`} className="h-10 w-10">
-              <Image
-                source={{ uri: author.profilePicture }}
-                alt={author.name}
-                className="h-full w-full rounded-full object-cover"
-              />
-            </Link>
-          )}
           <Link
             href={`/question/${id}`}
-            className={`flex items-center text-sm space-x-2 font-medium ${
+            className={`flex items-center text-sm space-x-2 font-medium p-2 ${
               highlighted ? "text-blue-600" : "text-gray-800"
             }`}
           >
diff --git a/mobile/components/QuestionsList.tsx b/mobile/components/QuestionsList.tsx
new file mode 100644
index 00000000..c373469f
--- /dev/null
+++ b/mobile/components/QuestionsList.tsx
@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { View, Text, Button, ActivityIndicator } from "react-native";
+import { QuestionCard } from "@/components/QuestionCard";
+import {
+  SearchQuestionsQueryParams,
+  useSearchQuestions,
+  SearchQuestionsResponse,
+} from "@/services/api/programmingForumComponents";
+
+interface QuestionListProps {
+  searchQueryParams?: string;
+  pageSize?: number;
+  difficultyFilter?: "EASY" | "MEDIUM" | "HARD";
+  tagFilter?: string;
+  sortBy?: "RECENT" | "TOP_RATED";
+}
+
+export const QuestionList: React.FC<QuestionListProps> = ({
+  searchQueryParams = "",
+  pageSize = 10,
+  difficultyFilter,
+  tagFilter = "",
+  sortBy = "RECENT",
+}) => {
+  const [page, setPage] = useState(1);
+
+  const q: SearchQuestionsQueryParams = {
+    q: searchQueryParams,
+    page,
+    pageSize,
+    ...(difficultyFilter && { difficulty: difficultyFilter }),
+    ...(tagFilter && { tags: tagFilter }),
+  };
+
+  // Fetch questions
+  const {
+    data: questionSearchData,
+    isLoading: isLoadingQuestions,
+    error: questionsError,
+  } = useSearchQuestions({
+    queryParams: q,
+  });
+
+  const isQuestionsResponseObject = (
+    data: SearchQuestionsResponse["data"]
+  ): data is Exclude<SearchQuestionsResponse["data"], any[]> => {
+    return typeof data === "object" && !Array.isArray(data);
+  };
+
+  const questions =
+    questionSearchData && isQuestionsResponseObject(questionSearchData.data)
+      ? questionSearchData.data.items
+      : [];
+  const totalPages =
+    questionSearchData && isQuestionsResponseObject(questionSearchData.data)
+      ? questionSearchData.data.totalPages
+      : 0;
+
+  const handleNextPage = () => {
+    if (page < (totalPages ?? 0)) setPage((prev) => prev + 1);
+  };
+
+  const handlePreviousPage = () => {
+    if (page > 1) setPage((prev) => prev - 1);
+  };
+
+  return (
+    <View>
+      {isLoadingQuestions && <ActivityIndicator size="large" />}
+      {questionsError && <Text>Error: {questionsError.status}</Text>}
+      {questions && (
+        <View className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {questions
+            .sort((a, b) => { 
+              if (sortBy === "RECENT") {
+                return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+              } else {
+                return (b.upvoteCount - b.downvoteCount) - (a.upvoteCount - a.downvoteCount);
+              }
+            })
+            .map((question) => (
+              <QuestionCard
+                key={question.id}
+                id={String(question.id)}
+                title={question.title}
+                content={question.content}
+                votes={question.upvoteCount + question.downvoteCount}
+                answerCount={question.answerCount}
+                author={question.author}
+                difficulty={question.difficulty}
+                highlighted={question.difficulty === "EASY"}
+              />
+            ))}
+        </View>
+      )}
+      <View style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 16 }}>
+        <Button title="Previous" onPress={handlePreviousPage} disabled={page === 1} />
+        <Text>
+          Page {page} of {totalPages}
+        </Text>
+        <Button
+          title="Next"
+          onPress={handleNextPage}
+          disabled={page === totalPages || isLoadingQuestions}
+        />
+      </View>
+    </View>
+  );
+};
diff --git a/mobile/components/TagList.tsx b/mobile/components/TagList.tsx
new file mode 100644
index 00000000..fd8739ce
--- /dev/null
+++ b/mobile/components/TagList.tsx
@@ -0,0 +1,66 @@
+import { SearchTagsQueryParams, useSearchTags, SearchTagsResponse } from "@/services/api/programmingForumComponents";
+import { View, Text, Button, ActivityIndicator } from "react-native";
+import { useState } from "react";
+import { TagCard } from "@/components/TagCard";
+import React from "react";
+
+interface TagListProps {
+  searchQueryParams?: string;
+  pagesize?: number;
+}
+
+export const TagList: React.FC<TagListProps> = ({ searchQueryParams="", pagesize=20}) => {
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(pagesize); 
+
+  const q: SearchTagsQueryParams = {
+    q: searchQueryParams,
+    page,
+    pageSize,
+  };
+
+  // Fetch tags
+  const { data: tagSearchData, isLoading: isLoadingTags, error: tagsError } = useSearchTags({
+    queryParams: q,
+  });
+
+  const isTagsResponseObject = (
+    data: SearchTagsResponse["data"]
+  ): data is Exclude<SearchTagsResponse["data"], any[]> => {
+    return typeof data === "object" && !Array.isArray(data);
+  };
+
+  const tags = tagSearchData && isTagsResponseObject(tagSearchData.data) ? tagSearchData.data.items : [];
+  const totalPages = tagSearchData && isTagsResponseObject(tagSearchData.data) ? tagSearchData.data.totalPages : 0;
+
+  const isLoading = isLoadingTags;
+
+  const handleNextPage = () => {
+    if (page < (totalPages ?? 0)) setPage((prev) => prev + 1);
+  };
+
+  const handlePreviousPage = () => {
+    if (page > 1) setPage((prev) => prev - 1);
+  };
+
+  return (
+    <View>
+      {isLoading && <ActivityIndicator size="large" />}
+      {tagsError && <Text>Error: {tagsError.status}</Text>}
+      {tags && (
+        <View className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {tags
+            .map((tag) => (
+              <TagCard key={tag.tagId} tag={tag} />
+            )
+          )}
+        </View>
+      )}
+      <View style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 16 }}>
+        <Button title="Previous" onPress={handlePreviousPage} disabled={page === 1} />
+        <Text>Page {page} of {totalPages}</Text>
+        <Button title="Next" onPress={handleNextPage} disabled={page === totalPages || isLoading} />
+      </View>
+    </View>
+  );
+};
\ No newline at end of file
diff --git a/mobile/components/ui/card/styles.tsx b/mobile/components/ui/card/styles.tsx
index 33acd888..c59d9044 100644
--- a/mobile/components/ui/card/styles.tsx
+++ b/mobile/components/ui/card/styles.tsx
@@ -1,6 +1,6 @@
 import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb";
 import { tva } from "@gluestack-ui/nativewind-utils/tva";
-const baseStyle = isWeb ? "flex flex-col relative z-0" : "bg-neutral-150 ";
+const baseStyle = isWeb ? "flex flex-col relative z-0" : "#e5e5e5 ";
 
 export const cardStyle = tva({
   base: baseStyle,
@@ -11,7 +11,7 @@ export const cardStyle = tva({
       lg: "p-6 rounded-xl",
     },
     variant: {
-      elevated: "bg-neutral-150 shadow-xl",
+      elevated: "#e5e5e5 shadow-xl",
       outline: "border border-outline-200 ",
       ghost: "rounded-none",
       filled: "bg-background-50",
diff --git a/mobile/services/api/programmingForumComponents.ts b/mobile/services/api/programmingForumComponents.ts
index 83022698..63141bb8 100644
--- a/mobile/services/api/programmingForumComponents.ts
+++ b/mobile/services/api/programmingForumComponents.ts
@@ -1101,7 +1101,7 @@ export const fetchRateQuestion = (
     {},
     RateQuestionPathParams
   >({
-    url: "/api/v1/questions/{id}/vote-difficulty",
+    url: "/questions/{id}/vote-difficulty",
     method: "post",
     ...variables,
     signal,
diff --git a/mobile/services/api/programmingForumSchemas.ts b/mobile/services/api/programmingForumSchemas.ts
index e330ae3e..8c73d7f9 100644
--- a/mobile/services/api/programmingForumSchemas.ts
+++ b/mobile/services/api/programmingForumSchemas.ts
@@ -171,8 +171,9 @@ export type QuestionSummary = {
   createdAt: string;
   difficulty: DifficultyLevel;
   tags: TagSummary[];
-  likeCount: number;
-  commentCount: number;
+  upvoteCount: number;
+  downvoteCount: number;
+  answerCount: number;
   viewCount?: number;
 };
 
diff --git a/swagger/openapi.yml b/swagger/openapi.yml
index 417796c3..f619eefd 100644
--- a/swagger/openapi.yml
+++ b/swagger/openapi.yml
@@ -1487,10 +1487,11 @@ components:
       required:
         - id
         - title
-        - likeCount
+        - upvoteCount
+        - downvoteCount
         - difficulty
         - createdAt
-        - commentCount
+        - answerCount
         - tags
       properties:
         id:
@@ -1510,9 +1511,11 @@ components:
           type: array
           items:
             $ref: "#/components/schemas/TagSummary"
-        likeCount:
+        upvoteCount:
           type: integer
-        commentCount:
+        downvoteCount:
+          type: integer
+        answerCount:
           type: integer
         viewCount:
           type: integer