diff --git a/apps/formbricks-com/components/shared/Header.tsx b/apps/formbricks-com/components/shared/Header.tsx
index c753a4d056..0d630511e6 100644
--- a/apps/formbricks-com/components/shared/Header.tsx
+++ b/apps/formbricks-com/components/shared/Header.tsx
@@ -262,18 +262,17 @@ export default function Header() {
             className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Blog {/* <p className="bg-brand inline rounded-full px-2 text-xs text-white">1</p> */}
           </Link>
-{/*           <Link
+          {/*           <Link
             href="/careers"
             className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Careers <p className="bg-brand inline rounded-full px-2 text-xs text-white">2</p>
           </Link> */}
 
-                 <Link
+          <Link
             href="/community"
             className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Community
           </Link>
-
         </Popover.Group>
         <div className="hidden flex-1 items-center justify-end md:flex">
           <ThemeSelector className="relative z-10 mr-5" />
@@ -368,7 +367,7 @@ export default function Header() {
                 <Link href="#pricing">Pricing</Link>
                 <Link href="/docs">Docs</Link>
                 <Link href="/blog">Blog</Link>
-              {/*   <Link href="/careers">Careers</Link> */}
+                {/*   <Link href="/careers">Careers</Link> */}
                 <Button
                   variant="secondary"
                   EndIcon={GitHubIcon}
diff --git a/apps/formbricks-com/pages/careers.tsx b/apps/formbricks-com/pages/careers.tsx
index d07940dd9b..8b21ad42c3 100644
--- a/apps/formbricks-com/pages/careers.tsx
+++ b/apps/formbricks-com/pages/careers.tsx
@@ -27,7 +27,7 @@ export default function CareersPage() {
         headingPt2="decisions."
         subheading="We are currently not hiring. Contributions are always welcome!"
       />
-       {/*
+      {/*
       <div className="mx-auto w-3/4">
  
          {Roles.map((role) => (
diff --git a/apps/formbricks-com/pages/community.tsx b/apps/formbricks-com/pages/community.tsx
index 215df0d063..20fefcc6ca 100644
--- a/apps/formbricks-com/pages/community.tsx
+++ b/apps/formbricks-com/pages/community.tsx
@@ -41,7 +41,7 @@ const CommunityPage = () => {
             Top Contributors
           </h2>
           <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
-           Super thankful to have you guys contribute for Formbricks 🙌
+            Super thankful to have you guys contribute for Formbricks 🙌
           </p>
           <ol className="ml-4 mt-10 list-decimal">
             {topContributors.map((MVP) => (
diff --git a/apps/web/app/api/auth/[...nextauth]/authOptions.ts b/apps/web/app/api/auth/[...nextauth]/authOptions.ts
index 5ef07e7708..09c5a7f4fa 100644
--- a/apps/web/app/api/auth/[...nextauth]/authOptions.ts
+++ b/apps/web/app/api/auth/[...nextauth]/authOptions.ts
@@ -295,7 +295,7 @@ export const authOptions: NextAuthOptions = {
                                         name: "50% Scroll",
                                         description: "A user scrolled 50% of the current page",
                                         type: "automatic",
-                                      }
+                                      },
                                     ],
                                   },
                                   attributeClasses: {
@@ -331,7 +331,7 @@ export const authOptions: NextAuthOptions = {
                                         name: "50% Scroll",
                                         description: "A user scrolled 50% of the current page",
                                         type: "automatic",
-                                      }
+                                      },
                                     ],
                                   },
                                   attributeClasses: {
diff --git a/apps/web/app/environments/[environmentId]/actions.ts b/apps/web/app/environments/[environmentId]/actions.ts
index 9c4e4a4a4d..5485ecbf08 100644
--- a/apps/web/app/environments/[environmentId]/actions.ts
+++ b/apps/web/app/environments/[environmentId]/actions.ts
@@ -38,7 +38,7 @@ export async function createTeam(teamName: string, ownerUserId: string): Promise
                         name: "50% Scroll",
                         description: "A user scrolled 50% of the current page",
                         type: "automatic",
-                      }
+                      },
                     ],
                   },
                   attributeClasses: {
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/ResponsesLimitReachedBanner.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/ResponsesLimitReachedBanner.tsx
index 75f30b1003..ea77891a06 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/ResponsesLimitReachedBanner.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/ResponsesLimitReachedBanner.tsx
@@ -1,17 +1,20 @@
-"use client";
-
 import { RESPONSES_LIMIT_FREE } from "@formbricks/lib/constants";
-import { useResponses } from "@/lib/responses/responses";
 import Link from "next/link";
 
-export default function ResponsesLimitReachedBanner({ environmentId, surveyId }) {
-  const { responsesData } = useResponses(environmentId, surveyId);
-  const reachedLimit = responsesData?.reachedLimit;
-  const count = responsesData?.count;
+interface ResponsesLimitReachedBannerProps {
+  environmentId: string;
+  limitReached: boolean;
+  responsesCount: number;
+}
 
+export default function ResponsesLimitReachedBanner({
+  environmentId,
+  limitReached,
+  responsesCount,
+}: ResponsesLimitReachedBannerProps) {
   return (
     <>
-      {reachedLimit && (
+      {limitReached && (
         <div className="bg-brand-light relative isolate flex items-center gap-x-6 overflow-hidden px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
           <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
             <p className="text-sm leading-6 text-gray-900">
@@ -19,7 +22,7 @@ export default function ResponsesLimitReachedBanner({ environmentId, surveyId })
               <svg viewBox="0 0 2 2" className="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
                 <circle cx={1} cy={1} r={1} />
               </svg>
-              You can only see {RESPONSES_LIMIT_FREE} of the {count} responses you received.
+              You can only see {RESPONSES_LIMIT_FREE} of the {responsesCount} responses you received.
             </p>
             <Link
               href={`/environments/${environmentId}/settings/billing`}
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseNote.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseNote.tsx
index 1a58e0f2d4..f0326bfda9 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseNote.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseNote.tsx
@@ -1,36 +1,45 @@
 "use client";
 
-import { OpenTextSummaryProps } from "@/app/environments/[environmentId]/surveys/[surveyId]/responses/SingleResponse";
 import { addResponseNote } from "@/lib/responseNotes/responsesNotes";
-import { useResponses } from "@/lib/responses/responses";
 import { timeSince } from "@formbricks/lib/time";
+import { TResponseNote } from "@formbricks/types/v1/responses";
 import { Button } from "@formbricks/ui";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { MinusIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import { Maximize2Icon } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { FormEvent, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 
-export default function ResponseNote({
-  data,
+interface ResponseNotesProps {
+  responseId: string;
+  notes: TResponseNote[];
+  environmentId: string;
+  surveyId: string;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+export default function ResponseNotes({
+  responseId,
+  notes,
   environmentId,
   surveyId,
   isOpen,
   setIsOpen,
-}: OpenTextSummaryProps & { isOpen: boolean; setIsOpen: (isOpen: boolean) => void }) {
+}: ResponseNotesProps) {
+  const router = useRouter();
   const [noteText, setNoteText] = useState("");
   const [isCreatingNote, setIsCreatingNote] = useState(false);
-  const { mutateResponses } = useResponses(environmentId, surveyId);
-  const responseNotes = data?.responseNotes;
   const divRef = useRef<HTMLDivElement>(null);
 
   const handleNoteSubmission = async (e: FormEvent) => {
     e.preventDefault();
     setIsCreatingNote(true);
     try {
-      await addResponseNote(environmentId, surveyId, data?.id, noteText);
-      mutateResponses();
+      await addResponseNote(environmentId, surveyId, responseId, noteText);
+      router.refresh();
       setIsCreatingNote(false);
       setNoteText("");
     } catch (e) {
@@ -43,17 +52,17 @@ export default function ResponseNote({
     if (divRef.current) {
       divRef.current.scrollTop = divRef.current.scrollHeight;
     }
-  }, [responseNotes]);
+  }, [notes]);
 
   return (
     <div
       className={clsx(
         "absolute w-1/4 rounded-lg border border-slate-200 shadow-sm transition-all",
-        !isOpen && responseNotes.length && "group/hint cursor-pointer bg-white hover:-right-3",
-        !isOpen && !responseNotes.length && "cursor-pointer bg-slate-50",
+        !isOpen && notes.length && "group/hint cursor-pointer bg-white hover:-right-3",
+        !isOpen && !notes.length && "cursor-pointer bg-slate-50",
         isOpen
           ? "-right-5 top-0 h-5/6 max-h-[600px] w-1/4 bg-white"
-          : responseNotes.length
+          : notes.length
           ? "right-0 top-[8.33%] h-5/6 max-h-[600px] w-1/12"
           : "right-[120px] top-[8.333%] h-5/6 max-h-[600px] w-1/12 group-hover:right-[0]"
       )}
@@ -65,9 +74,9 @@ export default function ResponseNote({
           <div
             className={clsx(
               "space-y-2 rounded-t-lg px-2 pb-2 pt-2",
-              responseNotes.length ? "flex h-12 items-center justify-end bg-amber-50" : "bg-slate-200"
+              notes.length ? "flex h-12 items-center justify-end bg-amber-50" : "bg-slate-200"
             )}>
-            {!responseNotes.length ? (
+            {!notes.length ? (
               <div className="flex items-center justify-end">
                 <div className="group flex items-center">
                   <h3 className="float-left ml-4 pb-1 text-sm text-slate-600">Note</h3>
@@ -79,7 +88,7 @@ export default function ResponseNote({
               </div>
             )}
           </div>
-          {!responseNotes.length ? (
+          {!notes.length ? (
             <div className="flex  flex-1 items-center justify-end pr-3">
               <span>
                 <PlusIcon className=" h-5 w-5 text-slate-400" />
@@ -104,14 +113,14 @@ export default function ResponseNote({
             </div>
           </div>
           <div className="flex-1 overflow-auto px-4 pt-2" ref={divRef}>
-            {responseNotes.map((note) => (
+            {notes.map((note) => (
               <div className="mb-3" key={note.id}>
                 <span className="block font-semibold text-slate-700">
                   {note.user.name}
                   <time
                     className="ml-2 text-xs font-normal text-slate-500"
-                    dateTime={timeSince(data.updatedAt)}>
-                    {timeSince(note.updatedAt)}
+                    dateTime={timeSince(note.updatedAt.toISOString())}>
+                    {timeSince(note.updatedAt.toISOString())}
                   </time>
                 </span>
                 <span className="block text-slate-700">{note.text}</span>
@@ -119,11 +128,7 @@ export default function ResponseNote({
             ))}
           </div>
           <div className="h-[120px]">
-            <div
-              className={clsx(
-                "absolute bottom-0 w-full px-3 pb-3",
-                !responseNotes.length && "absolute bottom-0"
-              )}>
+            <div className={clsx("absolute bottom-0 w-full px-3 pb-3", !notes.length && "absolute bottom-0")}>
               <form onSubmit={handleNoteSubmission}>
                 <div className="mt-4">
                   <textarea
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTagsWrapper.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTagsWrapper.tsx
index fcf940efc6..a3144a1782 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTagsWrapper.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTagsWrapper.tsx
@@ -1,66 +1,21 @@
-import { useResponses } from "@/lib/responses/responses";
-import { removeTagFromResponse, useAddTagToResponse } from "@/lib/tags/mutateTags";
-import { useCreateTag } from "@/lib/tags/mutateTags";
-import { useTagsForEnvironment } from "@/lib/tags/tags";
-import React from "react";
-import { useState } from "react";
-import { XCircleIcon } from "@heroicons/react/24/solid";
 import TagsCombobox from "@/app/environments/[environmentId]/surveys/[surveyId]/responses/TagsCombobox";
+import { useResponses } from "@/lib/responses/responses";
+import { removeTagFromResponse, useAddTagToResponse, useCreateTag } from "@/lib/tags/mutateTags";
+import { useTagsForEnvironment } from "@/lib/tags/tags";
+import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { cn } from "@formbricks/lib/cn";
-import { useEffect } from "react";
+import { Tag } from "./Tag";
 
 interface ResponseTagsWrapperProps {
   tags: {
     tagId: string;
     tagName: string;
   }[];
-
   environmentId: string;
   surveyId: string;
-  productId: string;
   responseId: string;
 }
 
-export function Tag({
-  tagId,
-  tagName,
-  onDelete,
-  tags,
-  setTagsState,
-  highlight,
-}: {
-  tagId: string;
-  tagName: string;
-  onDelete: (tagId: string) => void;
-  tags: ResponseTagsWrapperProps["tags"];
-  setTagsState: (tags: ResponseTagsWrapperProps["tags"]) => void;
-  highlight?: boolean;
-}) {
-  return (
-    <div
-      key={tagId}
-      className={cn(
-        "relative flex items-center justify-between gap-2 rounded-full border bg-slate-600 px-2 py-1 text-slate-100",
-        highlight && "border-2 border-green-600"
-      )}>
-      <div className="flex items-center gap-2">
-        <span className="text-sm">{tagName}</span>
-      </div>
-
-      <span
-        className="cursor-pointer text-sm"
-        onClick={() => {
-          setTagsState(tags.filter((tag) => tag.tagId !== tagId));
-
-          onDelete(tagId);
-        }}>
-        <XCircleIcon fontSize={24} className="h-4 w-4 text-slate-100 hover:text-slate-200" />
-      </span>
-    </div>
-  );
-}
-
 const ResponseTagsWrapper: React.FC<ResponseTagsWrapperProps> = ({
   tags,
   environmentId,
@@ -73,11 +28,8 @@ const ResponseTagsWrapper: React.FC<ResponseTagsWrapperProps> = ({
   const [tagIdToHighlight, setTagIdToHighlight] = useState("");
 
   const { createTag } = useCreateTag(environmentId);
-
   const { mutateResponses } = useResponses(environmentId, surveyId);
-
   const { data: environmentTags, mutate: refetchEnvironmentTags } = useTagsForEnvironment(environmentId);
-
   const { addTagToRespone } = useAddTagToResponse(environmentId, surveyId, responseId);
 
   const onDelete = async (tagId: string) => {
@@ -121,7 +73,7 @@ const ResponseTagsWrapper: React.FC<ResponseTagsWrapperProps> = ({
           searchValue={searchValue}
           setSearchValue={setSearchValue}
           tags={environmentTags?.map((tag) => ({ value: tag.id, label: tag.name })) ?? []}
-          currentTags={tags.map((tag) => ({ value: tag.tagId, label: tag.tagName }))}
+          currentTags={tagsState.map((tag) => ({ value: tag.tagId, label: tag.tagName }))}
           createTag={(tagName) => {
             createTag(
               {
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx
index a257af517e..04f4cb9531 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx
@@ -1,29 +1,32 @@
 "use client";
 
 import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
-import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { useResponses } from "@/lib/responses/responses";
-import { generateQuestionsAndAttributes, useSurvey } from "@/lib/surveys/surveys";
-import { Button, ErrorComponent } from "@formbricks/ui";
-import { useMemo } from "react";
-import SingleResponse from "./SingleResponse";
 import { convertToCSV } from "@/lib/csvConversion";
-import { useCallback } from "react";
-import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
-import { toast } from "react-hot-toast";
+import { generateQuestionsAndAttributes } from "@/lib/surveys/surveys";
 import { getTodaysDateFormatted } from "@formbricks/lib/time";
-import { useProduct } from "@/lib/products/products";
+import { TResponse } from "@formbricks/types/v1/responses";
+import { TSurvey } from "@formbricks/types/v1/surveys";
+import { Button } from "@formbricks/ui";
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
+import { createId } from "@paralleldrive/cuid2";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "react-hot-toast";
+import SingleResponse from "./SingleResponse";
 
-export default function ResponseTimeline({ environmentId, surveyId }) {
-  const { responsesData, isLoadingResponses, isErrorResponses } = useResponses(environmentId, surveyId);
-  const { survey, isLoadingSurvey, isErrorSurvey } = useSurvey(environmentId, surveyId);
-  const { product } = useProduct(environmentId);
-
-  const responses = responsesData?.responses;
+interface ResponseTimelineProps {
+  environmentId: string;
+  surveyId: string;
+  responses: TResponse[];
+  survey: TSurvey;
+}
 
+export default function ResponseTimeline({
+  environmentId,
+  surveyId,
+  responses,
+  survey,
+}: ResponseTimelineProps) {
   const { attributeMap, questionNames } = generateQuestionsAndAttributes(survey, responses);
-
   const [isDownloadCSVLoading, setIsDownloadCSVLoading] = useState(false);
 
   const matchQandA = useMemo(() => {
@@ -37,6 +40,7 @@ export default function ResponseTimeline({ environmentId, surveyId }) {
       // Replace question IDs with question headlines in response data
       const updatedResponses = responses.map((response) => {
         const updatedResponse: Array<{
+          id: string;
           question: string;
           answer: string;
           type: string;
@@ -48,6 +52,7 @@ export default function ResponseTimeline({ environmentId, surveyId }) {
           const answer = response.data[question.id];
           if (answer) {
             updatedResponse.push({
+              id: createId(),
               question: question.headline,
               type: question.type,
               scale: question.scale,
@@ -56,12 +61,12 @@ export default function ResponseTimeline({ environmentId, surveyId }) {
             });
           }
         }
-        return { ...response, responses: updatedResponse, person: response.person };
+        return { ...response, responses: updatedResponse };
       });
 
       const updatedResponsesWithTags = updatedResponses.map((response) => ({
         ...response,
-        tags: response.tags?.map((tag) => tag.tag),
+        tags: response.tags?.map((tag) => tag),
       }));
 
       return updatedResponsesWithTags;
@@ -164,14 +169,6 @@ export default function ResponseTimeline({ environmentId, surveyId }) {
     URL.revokeObjectURL(downloadUrl);
   }, [attributeMap, csvFileName, matchQandA, questionNames]);
 
-  if (isLoadingResponses || isLoadingSurvey) {
-    return <LoadingSpinner />;
-  }
-
-  if (isErrorResponses || isErrorSurvey) {
-    return <ErrorComponent />;
-  }
-
   return (
     <div className="space-y-4">
       {responses.length === 0 ? (
@@ -191,7 +188,6 @@ export default function ResponseTimeline({ environmentId, surveyId }) {
                 data={updatedResponse}
                 surveyId={surveyId}
                 environmentId={environmentId}
-                productId={product?.id ?? ""}
               />
             );
           })}
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/SingleResponse.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/SingleResponse.tsx
index a7248b6405..d5d94c3d5f 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/SingleResponse.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/SingleResponse.tsx
@@ -1,49 +1,26 @@
 "use client";
 
 import DeleteDialog from "@/components/shared/DeleteDialog";
+import { deleteSubmission, useResponses } from "@/lib/responses/responses";
+import { truncate } from "@/lib/utils";
 import { timeSince } from "@formbricks/lib/time";
-import { PersonAvatar, TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from "@formbricks/ui";
-import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { QuestionType } from "@formbricks/types/questions";
+import { TResponse } from "@formbricks/types/v1/responses";
+import { PersonAvatar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui";
 import { TrashIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
 import Link from "next/link";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { RatingResponse } from "../RatingResponse";
-import { deleteSubmission, useResponses } from "@/lib/responses/responses";
-import clsx from "clsx";
 import ResponseNote from "./ResponseNote";
-import ResponseTagsWrapper from "@/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTagsWrapper";
-import { TTag } from "@formbricks/types/v1/tags";
-import { QuestionType } from "@formbricks/types/questions";
+import ResponseTagsWrapper from "./ResponseTagsWrapper";
 
 export interface OpenTextSummaryProps {
-  data: {
-    id: string;
-    personId: string;
-    surveyId: string;
-    person: {
-      id: string;
-      createdAt: string;
-      updatedAt: string;
-      environmentId: string;
-      attributes: [];
-    };
-    personAttributes: {
-      [key: string]: string;
-    };
-    responseNotes: {
-      updatedAt: string;
-      createdAt: string;
-      id: string;
-      text: string;
-      user: {
-        name: string;
-      };
-    }[];
-    tags: TTag[];
-    value: string;
-    updatedAt: string;
-    finished: boolean;
+  environmentId: string;
+  surveyId: string;
+  data: TResponse & {
     responses: {
       id: string;
       question: string;
@@ -53,20 +30,16 @@ export interface OpenTextSummaryProps {
       range?: number;
     }[];
   };
-  environmentId: string;
-  surveyId: string;
-  productId: string;
 }
 
 function findEmail(person) {
-  const emailAttribute = person.attributes.find((attr) => attr.attributeClass.name === "email");
+  const emailAttribute = person.attributes.email;
   return emailAttribute ? emailAttribute.value : null;
 }
 
-export default function SingleResponse({ data, environmentId, surveyId, productId }: OpenTextSummaryProps) {
+export default function SingleResponse({ data, environmentId, surveyId }: OpenTextSummaryProps) {
   const email = data.person && findEmail(data.person);
-  const displayIdentifier = email || data.personId;
-  const responseNotes = data?.responseNotes;
+  const displayIdentifier = email || (data.person && truncate(data.person.id, 16)) || null;
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const { mutateResponses } = useResponses(environmentId, surveyId);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -86,7 +59,7 @@ export default function SingleResponse({ data, environmentId, surveyId, productI
       {Object.keys(data.personAttributes).map((key) => {
         return (
           <p>
-            {key}: <span className="font-bold">{data.personAttributes[key]}</span>
+            {key}: <span className="font-bold">{data.personAttributes && data.personAttributes[key]}</span>
           </p>
         );
       })}
@@ -98,18 +71,18 @@ export default function SingleResponse({ data, environmentId, surveyId, productI
       <div
         className={clsx(
           "relative z-10 my-6 rounded-lg border border-slate-200 bg-slate-50 shadow-sm transition-all",
-          isOpen ? "w-3/4" : responseNotes.length ? "w-[96.5%]" : "w-full group-hover:w-[96.5%]"
+          isOpen ? "w-3/4" : data.notes.length ? "w-[96.5%]" : "w-full group-hover:w-[96.5%]"
         )}>
         <div className="space-y-2 px-6 pb-5 pt-6">
           <div className="flex items-center justify-between">
-            {data.personId ? (
+            {data.person?.id ? (
               <Link
                 className="group flex items-center"
-                href={`/environments/${environmentId}/people/${data.personId}`}>
+                href={`/environments/${environmentId}/people/${data.person.id}`}>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger>
-                      <PersonAvatar personId={data.personId} />
+                      <PersonAvatar personId={data.person.id} />
                     </TooltipTrigger>
                     {tooltipContent}
                   </Tooltip>
@@ -131,8 +104,8 @@ export default function SingleResponse({ data, environmentId, surveyId, productI
                   Completed <CheckCircleIcon className="ml-1 h-5 w-5 text-green-400" />
                 </span>
               )}
-              <time className="text-slate-500" dateTime={timeSince(data.updatedAt)}>
-                {timeSince(data.updatedAt)}
+              <time className="text-slate-500" dateTime={timeSince(data.updatedAt.toISOString())}>
+                {timeSince(data.updatedAt.toISOString())}
               </time>
               <button
                 onClick={() => {
@@ -167,7 +140,6 @@ export default function SingleResponse({ data, environmentId, surveyId, productI
         <ResponseTagsWrapper
           environmentId={environmentId}
           surveyId={surveyId}
-          productId={productId}
           responseId={data.id}
           tags={data.tags.map((tag) => ({ tagId: tag.id, tagName: tag.name }))}
           key={data.tags.map((tag) => tag.id).join("-")}
@@ -182,12 +154,12 @@ export default function SingleResponse({ data, environmentId, surveyId, productI
         />
       </div>
       <ResponseNote
-        data={data}
+        responseId={data.id}
+        notes={data.notes}
         environmentId={environmentId}
         surveyId={surveyId}
         isOpen={isOpen}
         setIsOpen={setIsOpen}
-        productId={productId}
       />
     </div>
   );
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/Tag.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/Tag.tsx
new file mode 100644
index 0000000000..52ef533864
--- /dev/null
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/Tag.tsx
@@ -0,0 +1,55 @@
+import { cn } from "@formbricks/lib/cn";
+import { XCircleIcon } from "@heroicons/react/24/solid";
+
+interface Tag {
+  tagId: string;
+  tagName: string;
+}
+
+interface ResponseTagsWrapperProps {
+  tags: Tag[];
+  tagId: string;
+  tagName: string;
+  onDelete: (tagId: string) => void;
+  setTagsState: (tags: Tag[]) => void;
+  highlight?: boolean;
+}
+
+export function Tag({
+  tagId,
+  tagName,
+  onDelete,
+  tags,
+  setTagsState,
+  highlight,
+}: {
+  tagId: string;
+  tagName: string;
+  onDelete: (tagId: string) => void;
+  tags: ResponseTagsWrapperProps["tags"];
+  setTagsState: (tags: ResponseTagsWrapperProps["tags"]) => void;
+  highlight?: boolean;
+}) {
+  return (
+    <div
+      key={tagId}
+      className={cn(
+        "relative flex items-center justify-between gap-2 rounded-full border bg-slate-600 px-2 py-1 text-slate-100",
+        highlight && "border-2 border-green-600"
+      )}>
+      <div className="flex items-center gap-2">
+        <span className="text-sm">{tagName}</span>
+      </div>
+
+      <span
+        className="cursor-pointer text-sm"
+        onClick={() => {
+          setTagsState(tags.filter((tag) => tag.tagId !== tagId));
+
+          onDelete(tagId);
+        }}>
+        <XCircleIcon fontSize={24} className="h-4 w-4 text-slate-100 hover:text-slate-200" />
+      </span>
+    </div>
+  );
+}
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx
index 7b61784871..0ed99e96ed 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx
@@ -2,8 +2,16 @@ import ContentWrapper from "@/components/shared/ContentWrapper";
 import SurveyResultsTabs from "../SurveyResultsTabs";
 import ResponseTimeline from "./ResponseTimeline";
 import ResponsesLimitReachedBanner from "../ResponsesLimitReachedBanner";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions";
+import { getAnalysisData } from "@/app/environments/[environmentId]/surveys/[surveyId]/summary/data";
 
-export default function ResponsesPage({ params }) {
+export default async function ResponsesPage({ params }) {
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    throw new Error("Unauthorized");
+  }
+  const { responses, responsesCount, limitReached, survey } = await getAnalysisData(session, params.surveyId);
   return (
     <>
       <SurveyResultsTabs
@@ -11,9 +19,18 @@ export default function ResponsesPage({ params }) {
         environmentId={params.environmentId}
         surveyId={params.surveyId}
       />
-      <ResponsesLimitReachedBanner environmentId={params.environmentId} surveyId={params.surveyId} />
+      <ResponsesLimitReachedBanner
+        environmentId={params.environmentId}
+        limitReached={limitReached}
+        responsesCount={responsesCount}
+      />
       <ContentWrapper>
-        <ResponseTimeline environmentId={params.environmentId} surveyId={params.surveyId} />
+        <ResponseTimeline
+          environmentId={params.environmentId}
+          surveyId={params.surveyId}
+          responses={responses}
+          survey={survey}
+        />
       </ContentWrapper>
     </>
   );
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/LinkSurveyModal.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/LinkSurveyModal.tsx
index b042e937dd..5c729adf23 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/LinkSurveyModal.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/LinkSurveyModal.tsx
@@ -2,16 +2,15 @@
 
 import CodeBlock from "@/components/shared/CodeBlock";
 import Modal from "@/components/shared/Modal";
-import { Survey } from "@formbricks/types/surveys";
+import { TSurvey } from "@formbricks/types/v1/surveys";
 import { Button } from "@formbricks/ui";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { CodeBracketIcon, DocumentDuplicateIcon, EyeIcon } from "@heroicons/react/24/solid";
-import { useState } from "react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import toast from "react-hot-toast";
 
 interface LinkSurveyModalProps {
-  survey: Survey;
+  survey: TSurvey;
   open: boolean;
   setOpen: (open: boolean) => void;
 }
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/MultipleChoiceSummary.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/MultipleChoiceSummary.tsx
index 123fb87152..a2e77d1d7c 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/MultipleChoiceSummary.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/MultipleChoiceSummary.tsx
@@ -54,7 +54,7 @@ export default function MultipleChoiceSummary({
     }
 
     function findEmail(person) {
-      const emailAttribute = person.attributes.find((attr) => attr.attributeClass.name === "email");
+      const emailAttribute = person.attributes.email;
       return emailAttribute ? emailAttribute.value : null;
     }
 
@@ -79,12 +79,12 @@ export default function MultipleChoiceSummary({
     // count the responses
     for (const response of questionSummary.responses) {
       // if single choice, only add responses that are in the choices
-      if (isSingleChoice && response.value in resultsDict) {
-        resultsDict[response.value].count += 1;
+      if (isSingleChoice && response.value.toString() in resultsDict) {
+        resultsDict[response.value.toString()].count += 1;
       } else if (isSingleChoice) {
         // if single choice and not in choices, add to other
         addOtherChoice(response, response.value);
-      } else {
+      } else if (Array.isArray(response.value)) {
         // if multi choice add all responses
         for (const choice of response.value) {
           if (choice in resultsDict) {
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/OpenTextSummary.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/OpenTextSummary.tsx
index cecfb3f7cc..c7951741bb 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/OpenTextSummary.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/OpenTextSummary.tsx
@@ -12,7 +12,7 @@ interface OpenTextSummaryProps {
 }
 
 function findEmail(person) {
-  const emailAttribute = person.attributes.find((attr) => attr.attributeClass.name === "email");
+  const emailAttribute = person.attributes.email;
   return emailAttribute ? emailAttribute.value : null;
 }
 
@@ -39,17 +39,17 @@ export default function OpenTextSummary({ questionSummary, environmentId }: Open
         </div>
         {questionSummary.responses.map((response) => {
           const email = response.person && findEmail(response.person);
-          const displayIdentifier = email || truncate(response.personId, 16);
+          const displayIdentifier = email || (response.person && truncate(response.person.id, 16)) || null;
           return (
             <div
               key={response.id}
               className="grid  grid-cols-4 items-center border-b border-slate-100 py-2 text-slate-800">
               <div className="pl-6">
-                {response.personId ? (
+                {response.person ? (
                   <Link
                     className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.personId}`}>
-                    <PersonAvatar personId={response.personId} />
+                    href={`/environments/${environmentId}/people/${response.person.id}`}>
+                    <PersonAvatar personId={response.person.id} />
 
                     <p className="ph-no-capture ml-2 text-slate-600 group-hover:underline">
                       {displayIdentifier}
@@ -65,7 +65,7 @@ export default function OpenTextSummary({ questionSummary, environmentId }: Open
               <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
                 {response.value}
               </div>
-              <div className="px-6 text-slate-500">{timeSince(response.updatedAt)}</div>
+              <div className="px-6 text-slate-500">{timeSince(response.updatedAt.toISOString())}</div>
             </div>
           );
         })}
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/RatingSummary.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/RatingSummary.tsx
index 9a646d948b..9b27f260d5 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/RatingSummary.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/RatingSummary.tsx
@@ -30,7 +30,7 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
     // count the responses
     for (const response of questionSummary.responses) {
       // if single choice, only add responses that are in the choices
-      if (response.value in resultsDict) {
+      if (!Array.isArray(response.value) && response.value in resultsDict) {
         resultsDict[response.value].count += 1;
       }
     }
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx
index 0d63c727dd..e14b05c891 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryList.tsx
@@ -1,17 +1,4 @@
-"use client";
-
 import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
-import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { useResponses } from "@/lib/responses/responses";
-import { useSurvey } from "@/lib/surveys/surveys";
-import type { QuestionSummary } from "@formbricks/types/responses";
-import { ErrorComponent } from "@formbricks/ui";
-import { useMemo } from "react";
-import CTASummary from "./CTASummary";
-import MultipleChoiceSummary from "./MultipleChoiceSummary";
-import NPSSummary from "./NPSSummary";
-import OpenTextSummary from "./OpenTextSummary";
-import RatingSummary from "./RatingSummary";
 import {
   QuestionType,
   type CTAQuestion,
@@ -19,43 +6,40 @@ import {
   type MultipleChoiceSingleQuestion,
   type NPSQuestion,
   type OpenTextQuestion,
-  type Question,
   type RatingQuestion,
 } from "@formbricks/types/questions";
+import type { QuestionSummary } from "@formbricks/types/responses";
+import { TResponse } from "@formbricks/types/v1/responses";
+import { TSurvey, TSurveyQuestion } from "@formbricks/types/v1/surveys";
+import CTASummary from "./CTASummary";
+import MultipleChoiceSummary from "./MultipleChoiceSummary";
+import NPSSummary from "./NPSSummary";
+import OpenTextSummary from "./OpenTextSummary";
+import RatingSummary from "./RatingSummary";
 
-export default function SummaryList({ environmentId, surveyId }) {
-  const { responsesData, isLoadingResponses, isErrorResponses } = useResponses(environmentId, surveyId);
-  const { survey, isLoadingSurvey, isErrorSurvey } = useSurvey(environmentId, surveyId);
+interface SummaryListProps {
+  environmentId: string;
+  responses: TResponse[];
+  survey: TSurvey;
+}
 
-  const responses = responsesData?.responses;
-
-  const summaryData: QuestionSummary<Question>[] = useMemo(() => {
-    if (survey && responses) {
-      return survey.questions.map((question) => {
-        const questionResponses = responses
-          .filter((response) => question.id in response.data)
-          .map((r) => ({
-            id: r.id,
-            value: r.data[question.id],
-            updatedAt: r.updatedAt,
-            personId: r.personId,
-            person: r.person,
-          }));
-        return {
-          question,
-          responses: questionResponses,
-        };
-      });
-    }
-    return [];
-  }, [survey, responses]);
-
-  if (isLoadingResponses || isLoadingSurvey) {
-    return <LoadingSpinner />;
-  }
-
-  if (isErrorResponses || isErrorSurvey) {
-    return <ErrorComponent />;
+export default function SummaryList({ environmentId, responses, survey }: SummaryListProps) {
+  let summaryData: QuestionSummary<TSurveyQuestion>[] = [];
+  if (survey && responses) {
+    summaryData = survey.questions.map((question) => {
+      const questionResponses = responses
+        .filter((response) => question.id in response.data)
+        .map((r) => ({
+          id: r.id,
+          value: r.data[question.id],
+          updatedAt: r.updatedAt,
+          person: r.person,
+        }));
+      return {
+        question,
+        responses: questionResponses,
+      };
+    });
   }
 
   return (
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryMetadata.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryMetadata.tsx
index 20fa743889..c3ca75ba0f 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryMetadata.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/SummaryMetadata.tsx
@@ -3,8 +3,9 @@
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import SurveyStatusDropdown from "@/components/shared/SurveyStatusDropdown";
 import { useEnvironment } from "@/lib/environments/environments";
-import { useResponses } from "@/lib/responses/responses";
-import { useSurvey } from "@/lib/surveys/surveys";
+import { timeSinceConditionally } from "@formbricks/lib/time";
+import { TResponse } from "@formbricks/types/v1/responses";
+import { TSurvey } from "@formbricks/types/v1/surveys";
 import {
   Button,
   Confetti,
@@ -20,48 +21,57 @@ import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import LinkSurveyModal from "./LinkSurveyModal";
-import { timeSinceConditionally } from "@formbricks/lib/time";
 
-export default function SummaryMetadata({ surveyId, environmentId }) {
-  const { responsesData, isLoadingResponses, isErrorResponses } = useResponses(environmentId, surveyId);
-  const { survey, isLoadingSurvey, isErrorSurvey } = useSurvey(environmentId, surveyId);
+interface SummaryMetadataProps {
+  surveyId: string;
+  environmentId: string;
+  responses: TResponse[];
+  survey: TSurvey;
+}
+
+export default function SummaryMetadata({
+  surveyId,
+  environmentId,
+  responses,
+  survey,
+}: SummaryMetadataProps) {
   const { environment, isLoadingEnvironment, isErrorEnvironment } = useEnvironment(environmentId);
   const [confetti, setConfetti] = useState(false);
   const [showLinkModal, setShowLinkModal] = useState(false);
   const searchParams = useSearchParams();
 
   useEffect(() => {
-    const newSurveyParam = searchParams?.get("success");
-    if (newSurveyParam && survey && environment) {
-      setConfetti(true);
-      toast.success(
-        survey.type === "web" && !environment.widgetSetupCompleted
-          ? "Almost there! Install widget to start receiving responses."
-          : "Congrats! Your survey is live.",
-        {
-          icon: survey.type === "web" && !environment.widgetSetupCompleted ? "🤏" : "🎉",
-          duration: 5000,
-          position: "bottom-right",
+    if (environment) {
+      const newSurveyParam = searchParams?.get("success");
+      if (newSurveyParam && survey && environment) {
+        setConfetti(true);
+        toast.success(
+          survey.type === "web" && !environment.widgetSetupCompleted
+            ? "Almost there! Install widget to start receiving responses."
+            : "Congrats! Your survey is live.",
+          {
+            icon: survey.type === "web" && !environment.widgetSetupCompleted ? "🤏" : "🎉",
+            duration: 5000,
+            position: "bottom-right",
+          }
+        );
+        if (survey.type === "link") {
+          setShowLinkModal(true);
         }
-      );
-      if (survey.type === "link") {
-        setShowLinkModal(true);
       }
     }
   }, [environment, searchParams, survey]);
 
-  const responses = responsesData?.responses;
-
   const completionRate = useMemo(() => {
     if (!responses) return 0;
     return (responses.filter((r) => r.finished).length / responses.length) * 100;
   }, [responses]);
 
-  if (isLoadingResponses || isLoadingSurvey || isLoadingEnvironment) {
+  if (isLoadingEnvironment) {
     return <LoadingSpinner />;
   }
 
-  if (isErrorResponses || isErrorSurvey || isErrorEnvironment) {
+  if (isErrorEnvironment) {
     return <ErrorComponent />;
   }
 
@@ -72,7 +82,7 @@ export default function SummaryMetadata({ surveyId, environmentId }) {
           <div className="flex flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
             <p className="text-sm text-slate-600">Survey displays</p>
             <p className="text-2xl font-bold text-slate-800">
-              {survey.numDisplays === 0 ? <span>-</span> : survey.numDisplays}
+              {survey.analytics.numDisplays === 0 ? <span>-</span> : survey.analytics.numDisplays}
             </p>
           </div>
           <div className="flex flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
@@ -90,10 +100,10 @@ export default function SummaryMetadata({ surveyId, environmentId }) {
                     <QuestionMarkCircleIcon className="mb-1 ml-2 inline h-4 w-4 text-slate-500" />
                   </p>
                   <p className="text-2xl font-bold text-slate-800">
-                    {survey.responseRate === null || survey.responseRate === 0 ? (
+                    {survey.analytics.responseRate === null || survey.analytics.responseRate === 0 ? (
                       <span>-</span>
                     ) : (
-                      <span>{Math.round(survey.responseRate * 100)} %</span>
+                      <span>{Math.round(survey.analytics.responseRate * 100)} %</span>
                     )}
                   </p>
                 </div>
@@ -130,7 +140,7 @@ export default function SummaryMetadata({ surveyId, environmentId }) {
         </div>
         <div className="flex flex-col justify-between lg:col-span-1">
           <div className="text-right text-xs text-slate-400">
-            Last updated: {timeSinceConditionally(survey.updatedAt)}
+            Last updated: {timeSinceConditionally(survey.updatedAt.toISOString())}
           </div>
           <div className="flex justify-end gap-x-1.5">
             {survey.type === "link" && (
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/data.ts b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/data.ts
new file mode 100644
index 0000000000..183c622ecb
--- /dev/null
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/data.ts
@@ -0,0 +1,16 @@
+import { IS_FORMBRICKS_CLOUD, RESPONSES_LIMIT_FREE } from "@formbricks/lib/constants";
+import { getSurveyResponses } from "@formbricks/lib/services/response";
+import { getSurvey } from "@formbricks/lib/services/survey";
+import { Session } from "next-auth";
+
+export const getAnalysisData = async (session: Session, surveyId: string) => {
+  const survey = await getSurvey(surveyId);
+  if (!survey) throw new Error(`Survey not found: ${surveyId}`);
+  const allResponses = await getSurveyResponses(surveyId);
+  const limitReached =
+    IS_FORMBRICKS_CLOUD && session?.user.plan === "free" && allResponses.length >= RESPONSES_LIMIT_FREE;
+  const responses = limitReached ? allResponses.slice(0, RESPONSES_LIMIT_FREE) : allResponses;
+  const responsesCount = allResponses.length;
+
+  return { responses, responsesCount, limitReached, survey };
+};
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/page.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/page.tsx
index 706fcfc250..20cbac6912 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/page.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/page.tsx
@@ -1,17 +1,35 @@
+import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions";
+import { getAnalysisData } from "@/app/environments/[environmentId]/surveys/[surveyId]/summary/data";
 import ContentWrapper from "@/components/shared/ContentWrapper";
+import { getServerSession } from "next-auth";
+import ResponsesLimitReachedBanner from "../ResponsesLimitReachedBanner";
 import SurveyResultsTabs from "../SurveyResultsTabs";
 import SummaryList from "./SummaryList";
 import SummaryMetadata from "./SummaryMetadata";
-import ResponsesLimitReachedBanner from "../ResponsesLimitReachedBanner";
 
-export default function SummaryPage({ params }) {
+export default async function SummaryPage({ params }) {
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    throw new Error("Unauthorized");
+  }
+  const { responses, responsesCount, limitReached, survey } = await getAnalysisData(session, params.surveyId);
+
   return (
     <>
       <SurveyResultsTabs activeId="summary" environmentId={params.environmentId} surveyId={params.surveyId} />
-      <ResponsesLimitReachedBanner environmentId={params.environmentId} surveyId={params.surveyId} />
+      <ResponsesLimitReachedBanner
+        environmentId={params.environmentId}
+        limitReached={limitReached}
+        responsesCount={responsesCount}
+      />
       <ContentWrapper>
-        <SummaryMetadata surveyId={params.surveyId} environmentId={params.environmentId} />
-        <SummaryList environmentId={params.environmentId} surveyId={params.surveyId} />
+        <SummaryMetadata
+          surveyId={params.surveyId}
+          environmentId={params.environmentId}
+          responses={responses}
+          survey={survey}
+        />
+        <SummaryList environmentId={params.environmentId} survey={survey} responses={responses} />
       </ContentWrapper>
     </>
   );
diff --git a/apps/web/lib/populate.ts b/apps/web/lib/populate.ts
index 7f7b81109d..e36684173d 100644
--- a/apps/web/lib/populate.ts
+++ b/apps/web/lib/populate.ts
@@ -16,7 +16,7 @@ export const populateEnvironment = {
         name: "50% Scroll",
         description: "A user scrolled 50% of the current page",
         type: EventType.automatic,
-      }
+      },
     ],
   },
   attributeClasses: {
diff --git a/apps/web/lib/surveys/surveys.ts b/apps/web/lib/surveys/surveys.ts
index a6b6d21616..e023771b54 100644
--- a/apps/web/lib/surveys/surveys.ts
+++ b/apps/web/lib/surveys/surveys.ts
@@ -1,5 +1,7 @@
 import useSWR from "swr";
 import { fetcher } from "@formbricks/lib/fetcher";
+import { TSurvey } from "@formbricks/types/v1/surveys";
+import { TResponse } from "@formbricks/types/v1/responses";
 
 export const useSurveys = (environmentId: string) => {
   const { data, error, mutate, isLoading } = useSWR(`/api/v1/environments/${environmentId}/surveys`, fetcher);
@@ -134,34 +136,29 @@ export const duplicateSurvey = async (
   }
 };
 
-export const generateQuestionsAndAttributes = (survey, responses) => {
+export const generateQuestionsAndAttributes = (survey: TSurvey, responses: TResponse[]) => {
   let questionNames: string[] = [];
 
   if (survey?.questions) {
     questionNames = survey.questions.map((question) => question.headline);
   }
 
-  const attributeMap: Record<string, Record<string, string | null>> = {};
+  const attributeMap: Record<string, Record<string, string | number>> = {};
 
   if (responses) {
     responses.forEach((response) => {
       const { person } = response;
       if (person !== null) {
         const { id, attributes } = person;
-        attributes.forEach((attribute) => {
-          const { attributeClass, value } = attribute;
-          const attributeName = attributeClass.name;
-
+        Object.keys(attributes).forEach((attributeName) => {
           if (!attributeMap.hasOwnProperty(attributeName)) {
             attributeMap[attributeName] = {};
           }
-
-          attributeMap[attributeName][id] = value;
+          attributeMap[attributeName][id] = attributes[attributeName];
         });
       }
     });
   }
-
   return {
     questionNames,
     attributeMap,
diff --git a/apps/web/pages/api/v1/client/environments/[environmentId]/events/index.ts b/apps/web/pages/api/v1/client/environments/[environmentId]/events/index.ts
index 53c2b8027a..a4b0e029b1 100644
--- a/apps/web/pages/api/v1/client/environments/[environmentId]/events/index.ts
+++ b/apps/web/pages/api/v1/client/environments/[environmentId]/events/index.ts
@@ -1,6 +1,6 @@
 import { prisma } from "@formbricks/database";
 import type { NextApiRequest, NextApiResponse } from "next";
-import { EventType } from '@prisma/client';
+import { EventType } from "@prisma/client";
 
 export default async function handle(req: NextApiRequest, res: NextApiResponse) {
   const environmentId = req.query.environmentId?.toString();
diff --git a/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/duplicate/[targetEnvironmentId].ts b/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/duplicate/[targetEnvironmentId].ts
index e5eb0fbea1..c7b4138ea6 100644
--- a/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/duplicate/[targetEnvironmentId].ts
+++ b/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/duplicate/[targetEnvironmentId].ts
@@ -14,6 +14,9 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
   if (surveyId === undefined) {
     return res.status(400).json({ message: "Missing surveyId" });
   }
+  if (targetEnvironmentId === undefined) {
+    return res.status(400).json({ message: "Missing targetEnvironmentId" });
+  }
 
   const hasAccess = await hasEnvironmentAccess(req, res, environmentId);
   const hasTargetEnvAccess = await hasEnvironmentAccess(req, res, targetEnvironmentId);
diff --git a/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/responses/index.ts b/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/responses/index.ts
index 6fb63a0239..d6259ee0dc 100644
--- a/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/responses/index.ts
+++ b/apps/web/pages/api/v1/environments/[environmentId]/surveys/[surveyId]/responses/index.ts
@@ -49,7 +49,7 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             },
           },
         },
-        responseNotes: {
+        notes: {
           include: {
             response: true,
             user: true,
diff --git a/packages/database/schema.prisma b/packages/database/schema.prisma
index 8419f24b28..37e9e2bd0d 100644
--- a/packages/database/schema.prisma
+++ b/packages/database/schema.prisma
@@ -95,7 +95,7 @@ model Response {
   surveyId         String
   person           Person?           @relation(fields: [personId], references: [id], onDelete: Cascade)
   personId         String?
-  responseNotes    ResponseNote[]
+  notes            ResponseNote[]
   /// @zod.custom(imports.ZResponseData)
   /// [ResponseData]
   data             Json              @default("{}")
@@ -444,7 +444,7 @@ model User {
   identityProviderAccountId String?
   memberships               Membership[]
   accounts                  Account[]
-  responseNote              ResponseNote[]
+  responseNotes             ResponseNote[]
   groupId                   String?
   invitesCreated            Invite[]         @relation("inviteCreatedBy")
   invitesAccepted           Invite[]         @relation("inviteAcceptedBy")
diff --git a/packages/lib/services/response.ts b/packages/lib/services/response.ts
index 4d3cc62ab5..e0ccbe4908 100644
--- a/packages/lib/services/response.ts
+++ b/packages/lib/services/response.ts
@@ -3,6 +3,59 @@ import { TResponse, TResponseInput, TResponseUpdateInput } from "@formbricks/typ
 import { Prisma } from "@prisma/client";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/errors";
 import { getPerson, TransformPersonOutput, transformPrismaPerson } from "./person";
+import { TTag } from "@formbricks/types/v1/tags";
+
+const responseSelection = {
+  id: true,
+  createdAt: true,
+  updatedAt: true,
+  surveyId: true,
+  finished: true,
+  data: true,
+  personAttributes: true,
+  person: {
+    select: {
+      id: true,
+      attributes: {
+        select: {
+          value: true,
+          attributeClass: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+    },
+  },
+  notes: {
+    select: {
+      id: true,
+      createdAt: true,
+      updatedAt: true,
+      text: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+    },
+  },
+  tags: {
+    select: {
+      tag: {
+        select: {
+          id: true,
+          createdAt: true,
+          updatedAt: true,
+          name: true,
+          environmentId: true,
+        },
+      },
+    },
+  },
+};
 
 export const createResponse = async (responseInput: TResponseInput): Promise<TResponse> => {
   try {
@@ -30,19 +83,13 @@ export const createResponse = async (responseInput: TResponseInput): Promise<TRe
           personAttributes: person?.attributes,
         }),
       },
-      select: {
-        id: true,
-        createdAt: true,
-        updatedAt: true,
-        surveyId: true,
-        finished: true,
-        data: true,
-      },
+      select: responseSelection,
     });
 
     const response: TResponse = {
       ...responsePrisma,
-      person,
+      person: transformPrismaPerson(responsePrisma.person),
+      tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
     return response;
@@ -61,30 +108,7 @@ export const getResponse = async (responseId: string): Promise<TResponse | null>
       where: {
         id: responseId,
       },
-      select: {
-        id: true,
-        createdAt: true,
-        updatedAt: true,
-        surveyId: true,
-        finished: true,
-        data: true,
-        personAttributes: true,
-        person: {
-          select: {
-            id: true,
-            attributes: {
-              select: {
-                value: true,
-                attributeClass: {
-                  select: {
-                    name: true,
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
+      select: responseSelection,
     });
 
     if (!responsePrisma) {
@@ -93,8 +117,8 @@ export const getResponse = async (responseId: string): Promise<TResponse | null>
 
     const response: TResponse = {
       ...responsePrisma,
-      personAttributes: responsePrisma.personAttributes as Record<string, string | number>,
       person: transformPrismaPerson(responsePrisma.person),
+      tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
     return response;
@@ -107,6 +131,36 @@ export const getResponse = async (responseId: string): Promise<TResponse | null>
   }
 };
 
+export const getSurveyResponses = async (surveyId: string): Promise<TResponse[]> => {
+  try {
+    const responsesPrisma = await prisma.response.findMany({
+      where: {
+        surveyId,
+      },
+      select: responseSelection,
+      orderBy: [
+        {
+          createdAt: "desc",
+        },
+      ],
+    });
+
+    const responses: TResponse[] = responsesPrisma.map((responsePrisma) => ({
+      ...responsePrisma,
+      person: transformPrismaPerson(responsePrisma.person),
+      tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
+    }));
+
+    return responses;
+  } catch (error) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      throw new DatabaseError("Database operation failed");
+    }
+
+    throw error;
+  }
+};
+
 export const updateResponse = async (
   responseId: string,
   responseInput: TResponseUpdateInput
@@ -132,34 +186,13 @@ export const updateResponse = async (
         finished: responseInput.finished,
         data,
       },
-      select: {
-        id: true,
-        createdAt: true,
-        updatedAt: true,
-        surveyId: true,
-        finished: true,
-        data: true,
-        person: {
-          select: {
-            id: true,
-            attributes: {
-              select: {
-                value: true,
-                attributeClass: {
-                  select: {
-                    name: true,
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
+      select: responseSelection,
     });
 
     const response: TResponse = {
       ...responsePrisma,
       person: transformPrismaPerson(responsePrisma.person),
+      tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
     return response;
diff --git a/packages/lib/services/survey.ts b/packages/lib/services/survey.ts
index 41f5297250..f64c4445b6 100644
--- a/packages/lib/services/survey.ts
+++ b/packages/lib/services/survey.ts
@@ -76,7 +76,7 @@ export const getSurvey = async (surveyId: string): Promise<TSurvey | null> => {
   });
 
   // responseRate, rounded to 2 decimal places
-  const responseRate = Math.round((numDisplaysResponded / numDisplays) * 100) / 100;
+  const responseRate = numDisplays ? Math.round((numDisplaysResponded / numDisplays) * 100) / 100 : 0;
 
   const transformedSurvey = {
     ...surveyPrisma,
diff --git a/packages/types/responses.ts b/packages/types/responses.ts
index 8aa3ba1a1b..0a011ae712 100644
--- a/packages/types/responses.ts
+++ b/packages/types/responses.ts
@@ -1,4 +1,4 @@
-import type { Question } from "./questions";
+import { TPerson } from "./v1/people";
 
 export interface Response {
   id: string;
@@ -15,20 +15,12 @@ export interface Response {
   };
 }
 
-export interface QuestionSummary<T extends Question> {
+export interface QuestionSummary<T> {
   question: T;
   responses: {
     id: string;
-    personId: string;
-    value: string;
-    updatedAt: string;
-    person?: {
-      attributes: {
-        attributeClass: {
-          name: string;
-        };
-        value: string;
-      };
-    };
+    value: string | number | string[];
+    updatedAt: Date;
+    person: TPerson | null;
   }[];
 }
diff --git a/packages/types/v1/responses.ts b/packages/types/v1/responses.ts
index 04b179a9cd..5d4de8452d 100644
--- a/packages/types/v1/responses.ts
+++ b/packages/types/v1/responses.ts
@@ -1,14 +1,32 @@
 import { z } from "zod";
 import { ZPersonAttributes } from "./people";
+import { ZTag } from "./tags";
 
 export const ZResponseData = z.record(z.union([z.string(), z.number(), z.array(z.string())]));
 
 export type TResponseData = z.infer<typeof ZResponseData>;
 
-export const ZResponsePersonAttributes = ZPersonAttributes.optional();
+export const ZResponsePersonAttributes = ZPersonAttributes.nullable();
 
 export type TResponsePersonAttributes = z.infer<typeof ZResponsePersonAttributes>;
 
+export const ZResponseNoteUser = z.object({
+  id: z.string().cuid2(),
+  name: z.string().nullable(),
+});
+
+export type TResponseNoteUser = z.infer<typeof ZResponseNoteUser>;
+
+const ZResponseNote = z.object({
+  updatedAt: z.date(),
+  createdAt: z.date(),
+  id: z.string(),
+  text: z.string(),
+  user: ZResponseNoteUser,
+});
+
+export type TResponseNote = z.infer<typeof ZResponseNote>;
+
 const ZResponse = z.object({
   id: z.string().cuid2(),
   createdAt: z.date(),
@@ -23,6 +41,8 @@ const ZResponse = z.object({
   personAttributes: ZResponsePersonAttributes,
   finished: z.boolean(),
   data: ZResponseData,
+  notes: z.array(ZResponseNote),
+  tags: z.array(ZTag),
 });
 
 export type TResponse = z.infer<typeof ZResponse>;
diff --git a/packages/types/v1/surveys.ts b/packages/types/v1/surveys.ts
index 92983674e2..4619921515 100644
--- a/packages/types/v1/surveys.ts
+++ b/packages/types/v1/surveys.ts
@@ -108,6 +108,8 @@ const ZSurveyQuestionBase = z.object({
   subheader: z.string().optional(),
   required: z.boolean(),
   buttonLabel: z.string().optional(),
+  scale: z.enum(["number", "smiley", "star"]).optional(),
+  range: z.union([z.literal(5), z.literal(3), z.literal(4), z.literal(7), z.literal(10)]).optional(),
   logic: z.array(ZSurveyLogic).optional(),
 });
 
@@ -153,7 +155,7 @@ export const ZSurveyCTAQuestion = ZSurveyQuestionBase.extend({
 
 export const ZSurveyRatingQuestion = ZSurveyQuestionBase.extend({
   type: z.literal(QuestionType.Rating),
-  scale: z.union([z.literal("number"), z.literal("smiley"), z.literal("star")]),
+  scale: z.enum(["number", "smiley", "star"]),
   range: z.union([z.literal(5), z.literal(3), z.literal(4), z.literal(7), z.literal(10)]),
   lowerLabel: z.string(),
   upperLabel: z.string(),
@@ -170,6 +172,8 @@ export const ZSurveyQuestion = z.union([
   ZSurveyRatingQuestion,
 ]);
 
+export type TSurveyQuestion = z.infer<typeof ZSurveyQuestion>;
+
 export const ZSurveyQuestions = z.array(ZSurveyQuestion);
 
 export type TSurveyQuestions = z.infer<typeof ZSurveyQuestions>;