diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
index 61a5f62b..b2251a37 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
@@ -9,7 +9,6 @@ import CommentListItem from '~/components/questions/CommentListItem';
 import {
   SAMPLE_ANSWER,
   SAMPLE_ANSWER_COMMENT,
-  SAMPLE_QUESTION,
 } from '~/utils/questions/constants';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';
@@ -23,28 +22,48 @@ export default function QuestionPage() {
 
   const {
     register: comRegister,
+    reset: resetComment,
     handleSubmit: handleCommentSubmit,
     formState: { isDirty: isCommentDirty, isValid: isCommentValid },
   } = useForm<AnswerCommentData>({ mode: 'onChange' });
   const commentRegister = useFormRegister(comRegister);
 
-  const question = SAMPLE_QUESTION;
-  const comment = SAMPLE_ANSWER_COMMENT;
-
   const { answerId } = router.query;
 
+  const utils = trpc.useContext();
+
   const { data: answer } = trpc.useQuery([
     'questions.answers.getAnswerById',
     { answerId: answerId as string },
   ]);
 
+  const { data: comments } = trpc.useQuery([
+    'questions.answers.comments.getAnswerComments',
+    { answerId: answerId as string },
+  ]);
+
+  const { mutate: addComment } = trpc.useMutation(
+    'questions.answers.comments.create',
+    {
+      onSuccess: () => {
+        utils.invalidateQuery([
+          'questions.answers.comments.getAnswerComments',
+          { answerId: answerId as string },
+        ]);
+      },
+    },
+  );
+
   const handleBackNavigation = () => {
     router.back();
   };
 
   const handleSubmitComment = (data: AnswerCommentData) => {
-    // eslint-disable-next-line no-console
-    console.log(data);
+    resetComment();
+    addComment({
+      answerId: answerId as string,
+      content: data.commentContent,
+    });
   };
 
   if (!answer) {
@@ -109,7 +128,8 @@ export default function QuestionPage() {
                     onChange={(value) => {
                       // eslint-disable-next-line no-console
                       console.log(value);
-                    }}></Select>
+                    }}
+                  />
                 </div>
 
                 <Button
@@ -121,11 +141,14 @@ export default function QuestionPage() {
               </div>
             </form>
 
-            {Array.from({ length: question.commentCount }).map((_, index) => (
+            {(comments ?? []).map((comment) => (
               <CommentListItem
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
-                {...comment}
+                key={comment.id}
+                authorImageUrl={SAMPLE_ANSWER_COMMENT.authorImageUrl}
+                authorName={comment.user}
+                content={comment.content}
+                createdAt={comment.createdAt}
+                upvoteCount={comment.numVotes}
               />
             ))}
           </div>
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index ada2cc63..387a62f9 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -81,8 +81,6 @@ export default function QuestionPage() {
   };
 
   const handleSubmitAnswer = (data: AnswerQuestionData) => {
-    // eslint-disable-next-line no-console
-    console.log(data);
     addAnswer({
       content: data.answerContent,
       questionId: questionId as string,
@@ -98,7 +96,11 @@ export default function QuestionPage() {
   };
 
   if (!question) {
-    return <Spinner size="lg" />;
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
   }
 
   return (
@@ -159,7 +161,8 @@ export default function QuestionPage() {
                       onChange={(value) => {
                         // eslint-disable-next-line no-console
                         console.log(value);
-                      }}></Select>
+                      }}
+                    />
                   </div>
 
                   <Button
@@ -219,7 +222,8 @@ export default function QuestionPage() {
                     onChange={(value) => {
                       // eslint-disable-next-line no-console
                       console.log(value);
-                    }}></Select>
+                    }}
+                  />
                 </div>
               </div>
               <Button
@@ -235,13 +239,13 @@ export default function QuestionPage() {
               key={answer.id}
               authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
               authorName={answer.user}
-              commentCount={0}
+              commentCount={answer.numComments}
               content={answer.content}
               createdAt={answer.createdAt}
               href={`${router.asPath}/answer/${answer.id}/${createSlug(
                 answer.content,
               )}`}
-              upvoteCount={0}
+              upvoteCount={answer.numVotes}
             />
           ))}
         </div>
diff --git a/apps/portal/src/server/router/questions-answer-comment-router.ts b/apps/portal/src/server/router/questions-answer-comment-router.ts
index b4578cc5..51d17d34 100644
--- a/apps/portal/src/server/router/questions-answer-comment-router.ts
+++ b/apps/portal/src/server/router/questions-answer-comment-router.ts
@@ -12,57 +12,52 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
       answerId: z.string(),
     }),
     async resolve({ ctx, input }) {
-      const questionAnswerCommentsData = await ctx.prisma.questionsAnswerComment.findMany({
-        include: {
-        user: {
-          select: {
-            name: true,
+      const questionAnswerCommentsData =
+        await ctx.prisma.questionsAnswerComment.findMany({
+          include: {
+            user: {
+              select: {
+                name: true,
+              },
+            },
+            votes: true,
           },
-        },
-        votes: true,
-        },
-        orderBy: {
-          createdAt: 'desc',
-        },
-        where: {
-          ...input,
-        },
-    });
-    return questionAnswerCommentsData.map((data) => {
-      const votes:number = data.votes.reduce(
-        (previousValue:number, currentValue) => {
-          let result:number = previousValue;
-
-          switch(currentValue.vote) {
-          case Vote.UPVOTE:
-            result += 1
-            break;
-          case Vote.DOWNVOTE:
-            result -= 1
-            break;
-          }
-          return result;
-        },
-        0
+          orderBy: {
+            createdAt: 'desc',
+          },
+          where: {
+            ...input,
+          },
+        });
+      return questionAnswerCommentsData.map((data) => {
+        const votes: number = data.votes.reduce(
+          (previousValue: number, currentValue) => {
+            let result: number = previousValue;
+
+            switch (currentValue.vote) {
+              case Vote.UPVOTE:
+                result += 1;
+                break;
+              case Vote.DOWNVOTE:
+                result -= 1;
+                break;
+            }
+            return result;
+          },
+          0,
         );
 
-      let userName = "";
-
-      if (data.user) {
-        userName = data.user.name!;
-      }
-
-
-      const answerComment: AnswerComment = {
-        content: data.content,
-        id: data.id,
-        numVotes: votes,
-        updatedAt: data.updatedAt,
-        user: userName,
-      };
-      return answerComment;
-    });
-    }
+        const answerComment: AnswerComment = {
+          content: data.content,
+          createdAt: data.createdAt,
+          id: data.id,
+          numVotes: votes,
+          updatedAt: data.updatedAt,
+          user: data.user?.name ?? '',
+        };
+        return answerComment;
+      });
+    },
   })
   .mutation('create', {
     input: z.object({
@@ -88,11 +83,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const answerCommentToUpdate = await ctx.prisma.questionsAnswerComment.findUnique({
-        where: {
-          id: input.id,
-        },
-      });
+      const answerCommentToUpdate =
+        await ctx.prisma.questionsAnswerComment.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (answerCommentToUpdate?.id !== userId) {
         throw new TRPCError({
@@ -118,11 +114,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const answerCommentToDelete = await ctx.prisma.questionsAnswerComment.findUnique({
-        where: {
-          id: input.id,
-        },
-      });
+      const answerCommentToDelete =
+        await ctx.prisma.questionsAnswerComment.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (answerCommentToDelete?.id !== userId) {
         throw new TRPCError({
@@ -144,11 +141,11 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {answerCommentId} = input
+      const { answerCommentId } = input;
 
       return await ctx.prisma.questionsAnswerCommentVote.findUnique({
         where: {
-          answerCommentId_userId : {answerCommentId,userId },
+          answerCommentId_userId: { answerCommentId, userId },
         },
       });
     },
@@ -176,13 +173,14 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     }),
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
-      const {id, vote} = input
+      const { id, vote } = input;
 
-      const voteToUpdate = await ctx.prisma.questionsAnswerCommentVote.findUnique({
-        where: {
-          id: input.id,
-        },
-      });
+      const voteToUpdate =
+        await ctx.prisma.questionsAnswerCommentVote.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (voteToUpdate?.id !== userId) {
         throw new TRPCError({
@@ -208,10 +206,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
     async resolve({ ctx, input }) {
       const userId = ctx.session?.user?.id;
 
-      const voteToDelete = await ctx.prisma.questionsAnswerCommentVote.findUnique({
-        where: {
-          id: input.id,
-        },});
+      const voteToDelete =
+        await ctx.prisma.questionsAnswerCommentVote.findUnique({
+          where: {
+            id: input.id,
+          },
+        });
 
       if (voteToDelete?.id !== userId) {
         throw new TRPCError({
@@ -226,4 +226,4 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
         },
       });
     },
-  });
\ No newline at end of file
+  });
diff --git a/apps/portal/src/types/questions.d.ts b/apps/portal/src/types/questions.d.ts
index 75d02666..977d38c1 100644
--- a/apps/portal/src/types/questions.d.ts
+++ b/apps/portal/src/types/questions.d.ts
@@ -15,8 +15,11 @@ export type Question = {
 
 export type AnswerComment = {
   content: string;
+  createdAt: Date;
   id: string;
   numVotes: number;
+  updatedAt: Date;
+  user: string;
 };
 
 export type Answer = {