diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
index 7d89cdef6..0809d7aba 100644
--- a/app/components/Textarea.tsx
+++ b/app/components/Textarea.tsx
@@ -32,7 +32,9 @@ const Textarea = ({
           id: name,
           placeholder,
         })}
-        className={classNames("ds-textarea", { "has-error": error })}
+        className={classNames("ds-textarea placeholder-gray-600", {
+          "has-error": error,
+        })}
         aria-invalid={error !== undefined}
         aria-describedby={error && errorId}
         aria-errormessage={error && errorId}
diff --git a/app/components/UserFeedback.tsx b/app/components/UserFeedback.tsx
deleted file mode 100644
index 7027b5f36..000000000
--- a/app/components/UserFeedback.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import Heading from "./Heading";
-import Button from "./Button";
-import ThumbUpIcon from "@mui/icons-material/ThumbUpOutlined";
-import ThumbDownIcon from "@mui/icons-material/ThumbDownOutlined";
-import ButtonContainer from "./ButtonContainer";
-import Background from "./Background";
-import Container from "./Container";
-import { useState, useEffect } from "react";
-import RichText from "./RichText";
-import { useFetcher, useLocation } from "@remix-run/react";
-
-export const wasHelpfulFieldname = "wasHelpful";
-
-type UserFeedbackProps = {
-  heading: string;
-  yesButtonLabel: string;
-  noButtonLabel: string;
-  successHeading: string;
-  successText: string;
-  showSuccess: boolean;
-  context?: string | undefined;
-};
-
-export default function UserFeedback({
-  heading,
-  yesButtonLabel,
-  noButtonLabel,
-  successHeading,
-  successText,
-  showSuccess,
-  context,
-}: Readonly<UserFeedbackProps>) {
-  const url = useLocation().pathname;
-  const wasHelpfulFetcher = useFetcher();
-  const [jsAvailable, setJsAvailable] = useState(false);
-  useEffect(() => setJsAvailable(true), []);
-
-  return (
-    <Background paddingTop="32" paddingBottom="40" backgroundColor="white">
-      <Container
-        paddingTop="32"
-        paddingBottom="32"
-        overhangingBackground
-        backgroundColor="midBlue"
-      >
-        <div className="ds-stack-16">
-          {showSuccess ? (
-            <>
-              <Heading
-                look="ds-label-01-bold"
-                tagName="h2"
-                text={successHeading}
-              />
-              <RichText markdown={successText} />
-            </>
-          ) : (
-            <>
-              <Heading look="ds-label-01-bold" tagName="h2" text={heading} />
-              <wasHelpfulFetcher.Form
-                method="post"
-                action={`/action/send-rating?url=${url}&context=${
-                  context ?? ""
-                }&js=${String(jsAvailable)}`}
-              >
-                <ButtonContainer>
-                  <Button
-                    iconLeft={<ThumbUpIcon />}
-                    look="tertiary"
-                    name={wasHelpfulFieldname}
-                    value="yes"
-                    type="submit"
-                  >
-                    {yesButtonLabel}
-                  </Button>
-                  <Button
-                    iconLeft={<ThumbDownIcon />}
-                    look="tertiary"
-                    name={wasHelpfulFieldname}
-                    value="no"
-                    type="submit"
-                  >
-                    {noButtonLabel}
-                  </Button>
-                </ButtonContainer>
-              </wasHelpfulFetcher.Form>
-            </>
-          )}
-        </div>
-      </Container>
-    </Background>
-  );
-}
diff --git a/app/components/UserFeedback/FeedbackFormBox.tsx b/app/components/UserFeedback/FeedbackFormBox.tsx
new file mode 100644
index 000000000..74e8d5cd1
--- /dev/null
+++ b/app/components/UserFeedback/FeedbackFormBox.tsx
@@ -0,0 +1,83 @@
+import { z } from "zod";
+import { withZod } from "@remix-validated-form/with-zod";
+import { ValidatedForm } from "remix-validated-form";
+import CloseIcon from "@mui/icons-material/CloseOutlined";
+import SendIcon from "@mui/icons-material/SendOutlined";
+import Button from "../Button";
+import ButtonContainer from "../ButtonContainer";
+import Heading from "../Heading";
+import Textarea from "../Textarea";
+
+export const feedbackFormName = "feedbackForm";
+const feedbackFieldname = "feedback";
+const feedbackButtonFieldname = "feedbackButton";
+
+enum FeedbackButtons {
+  Abort = "abort",
+  Submit = "submit",
+}
+
+export const feedbackValidator = withZod(
+  z.object({
+    feedback: z
+      .string()
+      .refine(
+        (feedback) => !/\s0\d/.test(feedback),
+        "Bitte geben sie keine Telefonnummer ein.",
+      )
+      .refine(
+        (feedback) => !feedback.includes("@"),
+        "Bitte geben sie keine E-Mailadresse ein.",
+      ),
+  }),
+);
+
+export interface FeedbackBoxProps {
+  destination: string;
+  heading: string;
+  placeholder: string;
+  abortButtonLabel: string;
+  submitButtonLabel: string;
+}
+
+export const FeedbackFormBox = ({
+  destination,
+  heading,
+  placeholder,
+  abortButtonLabel,
+  submitButtonLabel,
+}: FeedbackBoxProps) => (
+  <>
+    <Heading look="ds-label-01-bold" tagName="h2" text={heading} />
+    <ValidatedForm
+      validator={feedbackValidator}
+      subaction={feedbackFormName}
+      method="post"
+      action={destination}
+    >
+      <div className="ds-stack-16">
+        <Textarea name={feedbackFieldname} placeholder={placeholder} />
+        <ButtonContainer>
+          <Button
+            iconLeft={<CloseIcon />}
+            look="tertiary"
+            name={feedbackButtonFieldname}
+            value={FeedbackButtons.Abort}
+            type="submit"
+          >
+            {abortButtonLabel}
+          </Button>
+          <Button
+            look="primary"
+            iconLeft={<SendIcon />}
+            name={feedbackButtonFieldname}
+            value={FeedbackButtons.Submit}
+            type="submit"
+          >
+            {submitButtonLabel}
+          </Button>
+        </ButtonContainer>
+      </div>
+    </ValidatedForm>
+  </>
+);
diff --git a/app/components/UserFeedback/PostSubmissionBox.tsx b/app/components/UserFeedback/PostSubmissionBox.tsx
new file mode 100644
index 000000000..4a9c05c76
--- /dev/null
+++ b/app/components/UserFeedback/PostSubmissionBox.tsx
@@ -0,0 +1,17 @@
+import Heading from "../Heading";
+import RichText from "../RichText";
+
+export interface PostSubmissionBoxProps {
+  heading: string;
+  text: string;
+}
+
+export const PostSubmissionBox = ({
+  heading,
+  text,
+}: PostSubmissionBoxProps) => (
+  <div data-testid="user-feedback-submission">
+    <Heading look="ds-label-01-bold" tagName="h2" text={heading} />
+    <RichText markdown={text} />
+  </div>
+);
diff --git a/app/components/UserFeedback/RatingBox.tsx b/app/components/UserFeedback/RatingBox.tsx
new file mode 100644
index 000000000..b7c551eae
--- /dev/null
+++ b/app/components/UserFeedback/RatingBox.tsx
@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { useFetcher } from "@remix-run/react";
+import ThumbDownIcon from "@mui/icons-material/ThumbDownOutlined";
+import ThumbUpIcon from "@mui/icons-material/ThumbUpOutlined";
+import Button from "../Button";
+import ButtonContainer from "../ButtonContainer";
+import Heading from "../Heading";
+
+export const userRatingFieldname = "wasHelpful";
+
+export interface RatingBoxProps {
+  heading: string;
+  url: string;
+  context?: string;
+  yesButtonLabel: string;
+  noButtonLabel: string;
+}
+
+export const RatingBox = ({
+  heading,
+  url,
+  context,
+  yesButtonLabel,
+  noButtonLabel,
+}: RatingBoxProps) => {
+  const ratingFetcher = useFetcher();
+  const [jsAvailable, setJsAvailable] = useState(false);
+  useEffect(() => setJsAvailable(true), []);
+
+  return (
+    <>
+      <Heading look="ds-label-01-bold" tagName="h2" text={heading} />
+      <ratingFetcher.Form
+        method="post"
+        action={`/action/send-rating?url=${url}&context=${
+          context ?? ""
+        }&js=${String(jsAvailable)}`}
+      >
+        <ButtonContainer>
+          <Button
+            iconLeft={<ThumbUpIcon />}
+            look="tertiary"
+            name={userRatingFieldname}
+            value="yes"
+            type="submit"
+          >
+            {yesButtonLabel}
+          </Button>
+          <Button
+            iconLeft={<ThumbDownIcon />}
+            look="tertiary"
+            name={userRatingFieldname}
+            value="no"
+            type="submit"
+          >
+            {noButtonLabel}
+          </Button>
+        </ButtonContainer>
+      </ratingFetcher.Form>
+    </>
+  );
+};
diff --git a/app/components/UserFeedback/index.tsx b/app/components/UserFeedback/index.tsx
new file mode 100644
index 000000000..e0efefd5b
--- /dev/null
+++ b/app/components/UserFeedback/index.tsx
@@ -0,0 +1,53 @@
+import { useLocation } from "@remix-run/react";
+import Background from "../Background";
+import Container from "../Container";
+import {
+  type PostSubmissionBoxProps,
+  PostSubmissionBox,
+} from "./PostSubmissionBox";
+import { type FeedbackBoxProps, FeedbackFormBox } from "./FeedbackFormBox";
+import { type RatingBoxProps, RatingBox } from "./RatingBox";
+
+export enum BannerState {
+  ShowRating = "showRating",
+  ShowFeedback = "showFeedback",
+  FeedbackGiven = "feedbackGiven",
+}
+
+type UserFeedbackProps = {
+  bannerState: BannerState;
+  rating: Omit<RatingBoxProps, "url">;
+  feedback: Omit<FeedbackBoxProps, "destination">;
+  postSubmission: PostSubmissionBoxProps;
+};
+
+export default function UserFeedback(props: Readonly<UserFeedbackProps>) {
+  const { pathname } = useLocation();
+
+  return (
+    <Background paddingTop="32" paddingBottom="40" backgroundColor="white">
+      <Container
+        paddingTop="32"
+        paddingBottom="32"
+        overhangingBackground
+        backgroundColor="midBlue"
+      >
+        <div className="ds-stack-16" data-testid="user-feedback-banner">
+          {
+            {
+              [BannerState.ShowRating]: (
+                <RatingBox url={pathname} {...props.rating} />
+              ),
+              [BannerState.ShowFeedback]: (
+                <FeedbackFormBox destination={pathname} {...props.feedback} />
+              ),
+              [BannerState.FeedbackGiven]: (
+                <PostSubmissionBox {...props.postSubmission} />
+              ),
+            }[props.bannerState]
+          }
+        </div>
+      </Container>
+    </Background>
+  );
+}
diff --git a/app/routes/action.send-rating.ts b/app/routes/action.send-rating.ts
index f3867af95..452061ce1 100644
--- a/app/routes/action.send-rating.ts
+++ b/app/routes/action.send-rating.ts
@@ -1,9 +1,11 @@
 import type { ActionFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { wasHelpfulFieldname } from "~/components/UserFeedback";
+import { BannerState } from "~/components/UserFeedback";
+import { userRatingFieldname } from "~/components/UserFeedback/RatingBox";
 import { getSessionForContext } from "~/services/session";
 import { PostHog } from "posthog-node";
 import { config } from "~/services/env/web";
+import { bannerStateName } from "~/services/feedback/handleFeedback";
 
 export const loader = () => redirect("/");
 
@@ -13,28 +15,33 @@ const posthogClient = POSTHOG_API_KEY
   : undefined;
 
 export const action = async ({ request }: ActionFunctionArgs) => {
-  console.log("action");
   const { searchParams } = new URL(request.url);
   const clientJavaScriptAvailable = searchParams.get("js") === "true";
   const url = searchParams.get("url") ?? "";
   const context = searchParams.get("context") ?? "";
+  const formData = await request.formData();
 
   const cookie = request.headers.get("Cookie");
   const { getSession, commitSession } = getSessionForContext("main");
   const session = await getSession(cookie);
-  const wasHelpful =
-    (session.get(wasHelpfulFieldname) as Record<string, boolean>) ?? {};
-  console.log({ wasHelpful });
-  const formData = await request.formData();
-  wasHelpful[url] = formData.get(wasHelpfulFieldname) === "yes";
-  session.set(wasHelpfulFieldname, wasHelpful);
+
+  const userRatings =
+    (session.get(userRatingFieldname) as Record<string, boolean>) ?? {};
+  userRatings[url] = formData.get(userRatingFieldname) === "yes";
+  session.set(userRatingFieldname, userRatings);
+
+  const bannerState =
+    (session.get(bannerStateName) as Record<string, BannerState>) ?? {};
+  bannerState[url] = BannerState.ShowFeedback;
+  session.set(bannerStateName, bannerState);
+
   const headers = { "Set-Cookie": await commitSession(session) };
 
   posthogClient?.capture({
     distinctId: ENVIRONMENT,
     event: "rating given",
     // eslint-disable-next-line camelcase
-    properties: { wasHelpful: wasHelpful[url], $current_url: url, context },
+    properties: { wasHelpful: userRatings[url], $current_url: url, context },
   });
 
   return clientJavaScriptAvailable
diff --git a/app/routes/feedback.erfolgreich.tsx b/app/routes/feedback.erfolgreich.tsx
new file mode 100644
index 000000000..5d843b490
--- /dev/null
+++ b/app/routes/feedback.erfolgreich.tsx
@@ -0,0 +1,27 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import Button from "~/components/Button";
+import Container from "~/components/Container";
+import PageContent from "~/components/PageContent";
+import { strapiPageFromRequest } from "~/services/cms/index.server";
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const { searchParams } = new URL(request.url);
+  const url = searchParams.get("url") ?? "";
+  const { content, meta } = await strapiPageFromRequest({ request });
+  return json({ content, meta, url });
+};
+
+export default function Index() {
+  const { url, content } = useLoaderData<typeof loader>();
+  return (
+    <div>
+      <PageContent content={content} />
+
+      <Container>
+        {url && <Button href={url}>Zurück, wo Sie gekommen sind</Button>}
+      </Container>
+    </div>
+  );
+}
diff --git a/app/routes/shared/result.tsx b/app/routes/shared/result.tsx
index 20adf1f75..7b0ef0639 100644
--- a/app/routes/shared/result.tsx
+++ b/app/routes/shared/result.tsx
@@ -24,13 +24,18 @@ import Heading from "~/components/Heading";
 import PageContent, { keyFromElement } from "~/components/PageContent";
 import RichText from "~/components/RichText";
 import InfoBox from "~/components/InfoBox";
-import UserFeedback, { wasHelpfulFieldname } from "~/components/UserFeedback";
+import UserFeedback, { BannerState } from "~/components/UserFeedback";
 import { ProgressBar } from "~/components/form/ProgressBar";
 import { ButtonNavigation } from "~/components/form/ButtonNavigation";
 import ButtonContainer from "~/components/ButtonContainer";
 import { throw404IfFeatureFlagEnabled } from "~/services/errorPages/throw404";
 import { infoBoxesFromElementsWithID } from "~/services/cms/models/StrapiInfoBoxItem";
 import { dataDeletionKey, lastStepKey } from "~/services/flow/lastStep";
+import {
+  getFeedbackBannerState,
+  handleFeedback,
+  isFeedbackForm,
+} from "~/services/feedback/handleFeedback";
 
 export const loader = async ({
   params,
@@ -73,8 +78,6 @@ export const loader = async ({
   const { getSession, commitSession } = getSessionForContext("main");
   const session = await getSession(cookieId);
   session.set(lastStepKey, { [flowId]: stepId });
-  const wasHelpful =
-    (session.get(wasHelpfulFieldname) as Record<string, boolean>) ?? {};
 
   return json(
     {
@@ -90,21 +93,16 @@ export const loader = async ({
         destination: flowController.getPrevious(stepId)?.url,
         label: common.backButtonDefaultLabel,
       },
-      feedbackSubmitted: pathname in wasHelpful,
+      bannerState:
+        getFeedbackBannerState(session, pathname) ?? BannerState.ShowRating,
     },
     { headers: { "Set-Cookie": await commitSession(session) } },
   );
 };
 
-export const action: ActionFunction = async ({ params, request, context }) => {
-  const splat = splatFromParams(params);
-  const flowId = flowIDFromPathname(new URL(request.url).pathname);
-  const cookieId = request.headers.get("Cookie");
-  const { data, id } = await getSessionForContext(flowId).getSession(cookieId);
-  context.sessionId = getSessionForContext(flowId).getSessionId(id); // For showing in errors
-  const { flow, guards } = flowSpecifics[flowId];
-  const flowController = buildFlowController({ flow, data, guards });
-  return redirect(flowController.getNext("ergebnis/" + splat).url);
+export const action: ActionFunction = async ({ request }) => {
+  const formData = await request.formData();
+  if (isFeedbackForm(formData)) return handleFeedback(formData, request);
 };
 
 const iconCSS = "inline-block mr-8 !h-[36px] !w-[36px]";
@@ -137,7 +135,7 @@ export function Step() {
     progress,
     nextButton,
     backButton,
-    feedbackSubmitted,
+    bannerState,
   } = useLoaderData<typeof loader>();
 
   const documentsList = cmsData.documents.data?.attributes.element ?? [];
@@ -234,13 +232,23 @@ export function Step() {
         )}
 
         <UserFeedback
-          showSuccess={feedbackSubmitted}
-          heading="Hat Ihnen der Vorab-Check geholfen?"
-          successHeading="Vielen Dank!"
-          successText="Ihr Feedback hilft uns, diese Seite für alle Nutzenden zu verbessern!"
-          yesButtonLabel="Ja"
-          noButtonLabel="Nein"
-          context={flowId}
+          bannerState={bannerState}
+          rating={{
+            heading: "Hat Ihnen der Vorab-Check geholfen?",
+            yesButtonLabel: "Ja",
+            noButtonLabel: "Nein",
+            context: flowId,
+          }}
+          feedback={{
+            heading: "Haben sie Verbesserungsvorschläge",
+            placeholder: "Bitte tragen Sie keine persönlichen Daten ein!",
+            abortButtonLabel: "Abbrechen",
+            submitButtonLabel: "Abschicken",
+          }}
+          postSubmission={{
+            heading: "Vielen Dank!",
+            text: "Ihr Feedback hilft uns, diese Seite für alle Nutzenden zu verbessern!",
+          }}
         />
 
         <PageContent content={nextSteps} />
diff --git a/app/services/feedback/handleFeedback.ts b/app/services/feedback/handleFeedback.ts
new file mode 100644
index 000000000..b0acfd948
--- /dev/null
+++ b/app/services/feedback/handleFeedback.ts
@@ -0,0 +1,66 @@
+import { getSessionForContext } from "../session";
+import { BannerState } from "~/components/UserFeedback";
+import {
+  feedbackFormName,
+  feedbackValidator,
+} from "~/components/UserFeedback/FeedbackFormBox";
+import { userRatingFieldname } from "~/components/UserFeedback/RatingBox";
+import { validationError } from "remix-validated-form";
+import { config } from "../env/web";
+import { PostHog } from "posthog-node";
+import { type Session, redirect } from "@remix-run/node";
+
+const { POSTHOG_API_KEY, POSTHOG_API_HOST, ENVIRONMENT } = config();
+const posthogClient = POSTHOG_API_KEY
+  ? new PostHog(POSTHOG_API_KEY, { host: POSTHOG_API_HOST })
+  : undefined;
+
+export const bannerStateName = "bannerState";
+
+export const handleFeedback = async (formData: FormData, request: Request) => {
+  const { pathname, searchParams } = new URL(request.url);
+  const context = searchParams.get("context") ?? "";
+
+  const cookie = request.headers.get("Cookie");
+  const { getSession, commitSession } = getSessionForContext("main");
+  const session = await getSession(cookie);
+
+  const userRating =
+    (session.get(userRatingFieldname) as Record<string, boolean>) ?? {};
+  const bannerState =
+    (session.get(bannerStateName) as Record<string, BannerState>) ?? {};
+
+  const result = await feedbackValidator.validate(formData);
+  if (result.error) {
+    return validationError(result.error, result.submittedData);
+  }
+  bannerState[pathname] = BannerState.FeedbackGiven;
+  posthogClient?.capture({
+    distinctId: ENVIRONMENT,
+    event: "feedback given",
+    properties: {
+      wasHelpful: userRating[pathname],
+      feedback: result.data?.feedback ?? "",
+      // eslint-disable-next-line camelcase
+      $current_url: pathname,
+      context,
+    },
+  });
+  session.set(bannerStateName, bannerState);
+  const headers = { "Set-Cookie": await commitSession(session) };
+  return redirect(pathname, { headers });
+};
+
+export const isFeedbackForm = (formData: FormData) => {
+  return formData.get("subaction") === feedbackFormName;
+};
+
+export const getFeedbackBannerState = (session: Session, url: string) => {
+  const getSessionForFeedbackState = session.get(bannerStateName) as Record<
+    string,
+    BannerState
+  >;
+  if (getSessionForFeedbackState) {
+    return getSessionForFeedbackState[url];
+  }
+};
diff --git a/tests/e2e/userfeedback.vorabcheck.spec.ts b/tests/e2e/userfeedback.vorabcheck.spec.ts
new file mode 100644
index 000000000..1f24123e5
--- /dev/null
+++ b/tests/e2e/userfeedback.vorabcheck.spec.ts
@@ -0,0 +1,40 @@
+import { test, expect } from "@playwright/test";
+import { BeratungshilfeVorabcheck } from "tests/e2e/pom/BeratungshilfeVorabcheck";
+
+let vorabcheck: BeratungshilfeVorabcheck;
+
+const submissionBoxId = "user-feedback-submission";
+
+test.beforeEach(async ({ page }) => {
+  vorabcheck = new BeratungshilfeVorabcheck(page);
+  // Move the user to the nearest page with feedback component
+  await vorabcheck.goto();
+  await vorabcheck.fillRadioPage("rechtsschutzversicherung", "yes");
+  await expect(page.getByTestId("user-feedback-banner")).toBeVisible();
+});
+
+test.describe("User Feedback", () => {
+  test("positive feedback submission", async ({ page }) => {
+    // the user should see submission feedback after clicking thumb-up icon and submitting feedback
+    await page.getByTestId("ThumbUpOutlinedIcon").click();
+    await page.getByRole("textbox").fill("### e2e test submission positive");
+    await page.getByTestId("SendOutlinedIcon").click();
+    await expect(page.getByTestId(submissionBoxId)).toBeVisible();
+  });
+
+  test("negative feedback submission", async ({ page }) => {
+    // the user should see submission feedback after clicking thumb-down icon and submitting feedback
+    await page.getByTestId("ThumbDownOutlinedIcon").click();
+    await page.getByRole("textbox").fill("### e2e test submission negative");
+    await page.getByTestId("SendOutlinedIcon").click();
+    await expect(page.getByTestId(submissionBoxId)).toBeVisible();
+  });
+
+  test("feedback submission abort", async ({ page }) => {
+    // the user should see thank you after clicking abort feedback
+    await page.getByTestId("ThumbDownOutlinedIcon").click();
+    await page.getByRole("textbox").fill("### e2e test submission negative");
+    await page.getByTestId("CloseOutlinedIcon").click();
+    await expect(page.getByTestId(submissionBoxId)).toBeVisible();
+  });
+});