diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts b/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts
index c4e20d432..7f475847e 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/api/get-forms.ts
@@ -7,3 +7,13 @@ export const getForms = (): Promise<Array<FormModel>> => {
     `/api/election-rounds/${electionRoundId}/citizen-reporting-forms`
   ).then((res) => res.data.forms);
 };
+
+export const getFormById = async (
+  formId: string
+): Promise<FormModel | undefined> => {
+  const formData = getForms().then((forms) =>
+    forms.find((form) => form.id === formId)
+  );
+
+  return formData;
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
index adca0797f..3025bf8b2 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ReportAnswersStep.tsx
@@ -1,10 +1,3 @@
-import {
-  type BaseQuestion,
-  type MultiSelectQuestion,
-  type SingleSelectQuestion,
-} from "@/common/types";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
 import {
   Card,
   CardContent,
@@ -12,41 +5,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { FileUploader } from "@/components/ui/file-uploader";
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import { useUploadFile } from "@/hooks/use-upload-file";
-import {
-  cn,
-  isDateQuestion,
-  isMultiSelectQuestion,
-  isNumberQuestion,
-  isSingleSelectQuestion,
-  isTextQuestion,
-} from "@/lib/utils";
-import { formsOptions } from "@/queries/use-forms";
+import { currentFormLanguageAtom } from "@/features/forms/atoms";
+import { FormQuestion } from "@/features/forms/components/FormQuestion";
 import { Route } from "@/routes/forms/$formId";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { notFound } from "@tanstack/react-router";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import { useAtom } from "jotai";
+import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import {
   Select,
@@ -57,103 +20,18 @@ import {
   SelectValue,
 } from "./ui/select";
 
-function QuestionText({
-  languageCode,
-  question,
-}: {
-  languageCode: string;
-  question: BaseQuestion;
-}) {
-  return (
-    <FormLabel className="flex gap-1">
-      <span> {question.code}</span>
-      <span>-</span>
-      <span>{question.text[languageCode]}</span>
-    </FormLabel>
-  );
-}
-
-function QuestionDescription({
-  languageCode,
-  question,
-}: {
-  languageCode: string;
-  question: BaseQuestion;
-}) {
-  return (
-    <FormDescription>{question?.helptext?.[languageCode]}</FormDescription>
-  );
-}
-
 function ReportAnswersStep() {
-  const { formId } = Route.useParams();
-  const { data: citizenReportFoms } = useSuspenseQuery(formsOptions());
-  const [loading, setLoading] = React.useState(false);
-  const { onUpload, progresses, uploadedFiles, isUploading } = useUploadFile({
-    defaultUploadedFiles: [],
-  });
-
-  const citizenReportForm = citizenReportFoms.find((f) => f.id === formId);
-
-  if (citizenReportForm === undefined) {
-    throw notFound({ throw: false });
-  }
-
-  const form = useFormContext();
-
-  const formValues = form.watch();
-
-  const [selectedLanguage, setSelectedLanguage] = useState<string>(
-    citizenReportForm.defaultLanguage
-  );
-
-  useEffect(() => {
-    citizenReportForm.questions.forEach((question) => {
-      if (isMultiSelectQuestion(question)) {
-        form.setValue(`question-${question.id}.selection`, []);
-      }
-
-      if (isTextQuestion(question)) {
-        form.setValue(`question-${question.id}`, "");
-      }
-    });
-  }, [form.setValue, citizenReportForm]);
-
-  const questionHasFreeTextOption = useCallback(
-    (question: SingleSelectQuestion | MultiSelectQuestion) => {
-      return question.options.some((option) => option.isFreeText);
-    },
-    []
+  const citizenReportForm = Route.useLoaderData();
+  const [selectedLanguage, setSelectedLanguage] = useAtom(
+    currentFormLanguageAtom
   );
 
-  const getFreeTextOption = useCallback(
-    (question: SingleSelectQuestion | MultiSelectQuestion) => {
-      return question.options.find((option) => option.isFreeText);
-    },
-    []
-  );
-
-  const isFreeTextOptionSelected = useCallback(
-    (question: SingleSelectQuestion | MultiSelectQuestion) => {
-      const freeTextOption = getFreeTextOption(question);
-      const selection = formValues[`question-${question.id}.selection`];
-
-      if (!selection) {
-        return false;
-      }
-
-      if (isSingleSelectQuestion(question)) {
-        return !!selection || selection === freeTextOption?.id;
-      } else {
-        return selection.some((s: string) => s === freeTextOption?.id);
-      }
-    },
-    [formValues]
-  );
+  const { watch } = useFormContext();
+  const values = watch();
 
-  function onSubmit() {
-    console.log("submit");
-  }
+  useEffect(() => {
+    console.table(values);
+  }, [values]);
 
   return (
     <Card>
@@ -190,313 +68,7 @@ function ReportAnswersStep() {
 
       <CardContent className="flex flex-col gap-8">
         {citizenReportForm.questions.map((question) => (
-          <div className="w-full flex flex-col gap-4" key={question.id}>
-            {isTextQuestion(question) && (
-              <FormField
-                control={form.control}
-                name={`question-${question.id}`}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <FormItem>
-                    <QuestionText
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <QuestionDescription
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-
-                    <FormControl>
-                      <Textarea
-                        placeholder={
-                          question?.inputPlaceholder?.[
-                            citizenReportForm.defaultLanguage
-                          ]
-                        }
-                        {...field}
-                      />
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-            {isNumberQuestion(question) && (
-              <FormField
-                control={form.control}
-                name={`question-${question.id}`}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <FormItem>
-                    <QuestionText
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <QuestionDescription
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <FormControl>
-                      <Input
-                        type="number"
-                        placeholder={
-                          question?.inputPlaceholder?.[
-                            citizenReportForm.defaultLanguage
-                          ]
-                        }
-                        {...field}
-                      />
-                    </FormControl>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {isDateQuestion(question) && (
-              <FormField
-                control={form.control}
-                name={`question-${question.id}`}
-                rules={{ required: true }}
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <QuestionText
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <QuestionDescription
-                      question={question}
-                      languageCode={selectedLanguage}
-                    />
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant={"outline"}
-                            className={cn(
-                              "w-[240px] pl-3 text-left font-normal",
-                              !field.value && "text-muted-foreground"
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, "PPP")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={field.onChange}
-                          disabled={(date) =>
-                            date > new Date() || date < new Date("1900-01-01")
-                          }
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-
-            {isSingleSelectQuestion(question) && (
-              <div className="flex flex-col gap-4">
-                <FormField
-                  control={form.control}
-                  name={`question-${question.id}.selection`}
-                  rules={{ required: true }}
-                  render={({ field }) => (
-                    <FormItem className="space-y-3">
-                      <QuestionText
-                        question={question}
-                        languageCode={selectedLanguage}
-                      />
-                      <QuestionDescription
-                        question={question}
-                        languageCode={selectedLanguage}
-                      />
-                      <FormControl>
-                        <RadioGroup
-                          onValueChange={field.onChange}
-                          defaultValue={field.value}
-                          className="flex flex-col space-y-1"
-                        >
-                          {question.options.map((option) => (
-                            <FormItem
-                              className="flex items-center space-x-3 space-y-0"
-                              key={`${question.id}-${option.id}`}
-                            >
-                              <FormControl>
-                                <RadioGroupItem value={option.id} />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                {option.text[selectedLanguage]}
-                              </FormLabel>
-                            </FormItem>
-                          ))}
-                        </RadioGroup>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {questionHasFreeTextOption(question) &&
-                  isFreeTextOptionSelected(question) && (
-                    <FormField
-                      control={form.control}
-                      name={`question-${question.id}.${
-                        getFreeTextOption(question)?.id
-                      }`}
-                      rules={{ required: true }}
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Textarea
-                              {...field}
-                              placeholder={
-                                getFreeTextOption(question)?.text?.[
-                                  citizenReportForm.defaultLanguage
-                                ]
-                              }
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-              </div>
-            )}
-
-            {isMultiSelectQuestion(question) && (
-              <div className="flex flex-col gap-4">
-                <FormField
-                  control={form.control}
-                  name={`question-${question.id}.selection`}
-                  render={() => (
-                    <FormItem>
-                      <div className="mb-4">
-                        <QuestionText
-                          question={question}
-                          languageCode={selectedLanguage}
-                        />
-                        <QuestionDescription
-                          question={question}
-                          languageCode={selectedLanguage}
-                        />
-                      </div>
-                      {question.options.map((option) => (
-                        <FormField
-                          key={option.id}
-                          control={form.control}
-                          name={`question-${question.id}.selection`}
-                          rules={{ required: true, minLength: 1 }}
-                          render={({ field }) => {
-                            return (
-                              <FormItem
-                                key={option.id}
-                                className="flex flex-row items-start space-x-3 space-y-0"
-                              >
-                                <FormControl>
-                                  <Checkbox
-                                    checked={field.value?.includes(option.id)}
-                                    onCheckedChange={(checked) => {
-                                      return checked
-                                        ? field.onChange([
-                                            ...field.value,
-                                            option.id,
-                                          ])
-                                        : field.onChange(
-                                            field.value?.filter(
-                                              (value: string) =>
-                                                value !== option.id
-                                            )
-                                          );
-                                    }}
-                                  />
-                                </FormControl>
-                                <FormLabel className="text-sm font-normal">
-                                  {
-                                    option.text[
-                                      citizenReportForm.defaultLanguage
-                                    ]
-                                  }
-                                </FormLabel>
-                              </FormItem>
-                            );
-                          }}
-                        />
-                      ))}
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {questionHasFreeTextOption(question) &&
-                  isFreeTextOptionSelected(question) && (
-                    <FormField
-                      control={form.control}
-                      name={`question-${question.id}.${
-                        getFreeTextOption(question)?.id
-                      }`}
-                      rules={{ required: true }}
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Textarea
-                              {...field}
-                              placeholder={
-                                getFreeTextOption(question)?.text?.[
-                                  citizenReportForm.defaultLanguage
-                                ]
-                              }
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-              </div>
-            )}
-
-            <FormField
-              control={form.control}
-              name={`question-${question.id}.attachments`}
-              render={({ field }) => (
-                <div className="space-y-6">
-                  <FormItem className="w-full">
-                    <FormLabel>Attachments </FormLabel>
-                    <FormControl>
-                      <FileUploader
-                        value={field.value}
-                        onValueChange={field.onChange}
-                        maxFileCount={undefined}
-                        maxSize={undefined}
-                        progresses={progresses}
-                        // pass the onUpload function here for direct upload
-                        // onUpload={uploadFiles}
-                        disabled={isUploading}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                  {/* {uploadedFiles.length > 0 ? (
-                        <UploadedFilesCard uploadedFiles={uploadedFiles} />
-                      ) : null} */}
-                </div>
-              )}
-            />
-            <Separator />
-          </div>
+          <FormQuestion question={question} />
         ))}
       </CardContent>
     </Card>
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx
index 7d7474cc9..a58a5d90c 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/form.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
 import {
   Controller,
   FormProvider,
@@ -9,27 +9,27 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue
-)
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -37,21 +37,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -60,19 +60,19 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
-)
+);
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
@@ -82,14 +82,14 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
         {...props}
       />
     </FormItemContext.Provider>
-  )
+  );
 }
 
 function FormLabel({
   className,
   ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -99,11 +99,12 @@ function FormLabel({
       htmlFor={formItemId}
       {...props}
     />
-  )
+  );
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -117,11 +118,11 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
       aria-invalid={!!error}
       {...props}
     />
-  )
+  );
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -130,15 +131,15 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -150,16 +151,16 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     >
       {body}
     </p>
-  )
+  );
 }
 
 export {
-  useFormField,
   Form,
-  FormItem,
-  FormLabel,
   FormControl,
   FormDescription,
-  FormMessage,
   FormField,
-}
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/number-input.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/number-input.tsx
new file mode 100644
index 000000000..f83d4aff1
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/number-input.tsx
@@ -0,0 +1,128 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+interface NumberInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  helperText?: string;
+  error?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (value: any) => void;
+  className?: string;
+}
+
+export function NumberInput({
+  label,
+  helperText,
+  error,
+  min,
+  max,
+  step = 1,
+  onChange,
+  className,
+  id,
+  ...props
+}: NumberInputProps) {
+  const inputId = React.useId();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value === "" ? undefined : Number(e.target.value);
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Allow: backspace, delete, tab, escape, enter, decimal point, minus sign (for negative numbers)
+    const allowedKeys = [
+      "Backspace",
+      "Delete",
+      "Tab",
+      "Escape",
+      "Enter",
+      ".",
+      "-",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End",
+    ];
+
+    // Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
+    if (
+      (e.ctrlKey && ["a", "c", "v", "x"].includes(e.key.toLowerCase())) ||
+      allowedKeys.includes(e.key)
+    ) {
+      // Check if decimal point is already present when trying to add another
+      if (e.key === "." && e.currentTarget.value.includes(".")) {
+        e.preventDefault();
+      }
+
+      // Check if minus sign is already present or not at the beginning
+      if (
+        e.key === "-" &&
+        (e.currentTarget.value.includes("-") ||
+          e.currentTarget.selectionStart !== 0)
+      ) {
+        e.preventDefault();
+      }
+
+      return;
+    }
+
+    // Allow numbers
+    if (/^\d$/.test(e.key)) {
+      return;
+    }
+
+    // Block everything else
+    e.preventDefault();
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {label && (
+        <Label htmlFor={inputId} className="text-sm font-medium">
+          {label}
+        </Label>
+      )}
+      <Input
+        id={inputId}
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        className={cn(error && "border-red-500 focus-visible:ring-red-500")}
+        aria-invalid={!!error}
+        aria-describedby={
+          error
+            ? `${inputId}-error`
+            : helperText
+            ? `${inputId}-description`
+            : undefined
+        }
+        {...props}
+      />
+      {helperText && !error && (
+        <p
+          id={`${inputId}-description`}
+          className="text-sm text-muted-foreground"
+        >
+          {helperText}
+        </p>
+      )}
+      {error && (
+        <p id={`${inputId}-error`} className="text-sm text-red-500">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/ratings.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/ratings.tsx
new file mode 100644
index 000000000..67d1a591d
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/components/ui/ratings.tsx
@@ -0,0 +1,90 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface RatingItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  selectedValue: number | null;
+  scale: number;
+}
+
+const RatingItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RatingItemProps
+>(({ className, value, selectedValue, scale, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      value={value}
+      className={cn(
+        Number(value) === 1 && "rounded-l-md",
+        "relative inline-flex items-center px-4 py-2 dark:text-white text-sm text-center font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0 w-full justify-center",
+        (selectedValue ?? -1) === Number(value) &&
+          "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
+        Number(value) === scale && "rounded-r-md",
+        className
+      )}
+      {...props}
+    >
+      {value}
+    </RadioGroupPrimitive.Item>
+  );
+});
+
+RatingItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+interface RatingGroupProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  scale?: number;
+  lowerLabel?: string;
+  upperLabel?: string;
+}
+
+const RatingGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  RatingGroupProps
+>(({ className, scale = 5, lowerLabel, upperLabel, ...props }, ref) => {
+  const [selectedValue, setSelectedValue] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    setSelectedValue(props.defaultValue ? Number(props.defaultValue) : null);
+  }, [props.defaultValue]);
+
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("", className)}
+      {...props}
+      ref={ref}
+      onValueChange={(value) => {
+        setSelectedValue(Number(value));
+        props.onValueChange && props.onValueChange(value);
+      }}
+      tabIndex={0}
+    >
+      <div className="w-full inline-flex">
+        {Array.from({ length: scale }, (_, i) => i + 1).map((value) => (
+          <RatingItem
+            key={value}
+            value={value.toString()}
+            selectedValue={selectedValue}
+            scale={scale}
+          />
+        ))}
+      </div>
+      <p className="text-sm italic" dir="auto">
+        {lowerLabel && <> 1 - {lowerLabel}</>}
+      </p>
+      <p className="text-sm italic" dir="auto">
+        {upperLabel && (
+          <>
+            {scale} - {upperLabel}
+          </>
+        )}
+      </p>
+    </RadioGroupPrimitive.Root>
+  );
+});
+RatingGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+export { RatingGroup, RatingItem };
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/atoms.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/atoms.ts
new file mode 100644
index 000000000..79258e7fb
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const currentFormLanguageAtom = atom("");
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestion.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestion.tsx
new file mode 100644
index 000000000..9dcdb4330
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestion.tsx
@@ -0,0 +1,98 @@
+import { type BaseQuestion } from "@/common/types";
+import { FormDescription, FormLabel } from "@/components/ui/form";
+import { currentFormLanguageAtom } from "@/features/forms/atoms";
+import {
+  isMultiSelectQuestion,
+  isNumberQuestion,
+  isRatingQuestion,
+  isSingleSelectQuestion,
+  isTextQuestion,
+} from "@/lib/utils";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import { useShouldDisplayQuestion } from "../hooks/useShouldDisplayQuestion";
+import {
+  FormQuestionNumberInput,
+  FormQuestionTextInput,
+} from "./FormQuestionInputs";
+import { FormQuestionMultiSelectInput } from "./FormQuestionMultiSelectInput";
+import { FormQuestionSingleSelectInput } from "./FormQuestionSingleSelectInput";
+import { FormQuestionRatingInput } from "./FormQuestionRatingInput";
+
+interface FormQuestionProps {
+  question: BaseQuestion;
+  isRequired: boolean;
+}
+
+const BaseFormQuestion = ({ question, isRequired }: FormQuestionProps) => {
+  const language = useAtomValue(currentFormLanguageAtom);
+
+  return (
+    <div className="w-full flex flex-col gap-4" key={question.id}>
+      <div>
+        <FormLabel>
+          <span> {`${question.code} - ${question.text[language]}`}</span>
+        </FormLabel>
+
+        <FormDescription>{question?.helptext?.[language]}</FormDescription>
+      </div>
+      {isNumberQuestion(question) && (
+        <FormQuestionNumberInput
+          questionId={question.id}
+          isRequired={isRequired}
+        />
+      )}
+      {isTextQuestion(question) && (
+        <FormQuestionTextInput
+          questionId={question.id}
+          isRequired={isRequired}
+        />
+      )}
+      {isSingleSelectQuestion(question) && (
+        <FormQuestionSingleSelectInput
+          question={question}
+          language={language}
+          isRequired={isRequired}
+        />
+      )}
+      {isMultiSelectQuestion(question) && (
+        <FormQuestionMultiSelectInput
+          question={question}
+          language={language}
+          isRequired={isRequired}
+        />
+      )}
+
+      {isRatingQuestion(question) && (
+        <FormQuestionRatingInput
+          question={question}
+          language={language}
+          isRequired={isRequired}
+        />
+      )}
+    </div>
+  );
+};
+
+const QuestionWithDisplayLogic = ({ question }: { question: BaseQuestion }) => {
+  const { control, unregister } = useFormContext();
+  const shouldDisplay = useShouldDisplayQuestion({ question, control });
+
+  useEffect(() => {
+    const fieldName = `question-${question.id}`;
+    return () => {
+      // unregister field if user changes the value of the parent and the condition stops matching
+      if (shouldDisplay) unregister(fieldName);
+    };
+  }, [shouldDisplay]);
+
+  if (!shouldDisplay) return;
+  return <BaseFormQuestion question={question} isRequired={shouldDisplay} />;
+};
+
+export const FormQuestion = ({ question }: { question: BaseQuestion }) => {
+  if (question.displayLogic)
+    return <QuestionWithDisplayLogic question={question} />;
+  return <BaseFormQuestion question={question} isRequired={true} />;
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionFreeTextInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionFreeTextInput.tsx
new file mode 100644
index 000000000..fbfdf14ca
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionFreeTextInput.tsx
@@ -0,0 +1,53 @@
+import {
+  type MultiSelectQuestion,
+  type SingleSelectQuestion,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { useFormContext } from "react-hook-form";
+import { useFreeTextInput } from "../hooks/useFreeTextInput";
+export const FormQuestionFreeTextInput = ({
+  question,
+  language,
+}: {
+  question: SingleSelectQuestion | MultiSelectQuestion;
+  language: string;
+}) => {
+  const { control, setValue } = useFormContext();
+  const {
+    fieldNames,
+    shouldDisplayFreeTextInput,
+    freeTextOption,
+    addFreeTextToOption,
+  } = useFreeTextInput(question);
+  return (
+    <FormField
+      control={control}
+      name={fieldNames.freeText}
+      rules={{
+        required: shouldDisplayFreeTextInput,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <Textarea
+              {...field}
+              onChange={(event) => {
+                const updatedData = addFreeTextToOption(event.target.value);
+                setValue(fieldNames.parent, updatedData);
+                field.onChange(event);
+              }}
+              placeholder={freeTextOption?.text?.[language]}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionInputs.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionInputs.tsx
new file mode 100644
index 000000000..0c4672f94
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionInputs.tsx
@@ -0,0 +1,98 @@
+import {
+  QuestionType,
+  type NumberAnswer,
+  type TextAnswer,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { NumberInput } from "@/components/ui/number-input";
+import { useFormContext } from "react-hook-form";
+import { mapFormDataToAnswer } from "../utils";
+
+export const FormQuestionNumberInput = ({
+  questionId,
+  isRequired,
+}: {
+  questionId: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <FormField
+      control={control}
+      name={`question-${questionId}`}
+      rules={{
+        required: isRequired,
+        validate: (value: NumberAnswer | undefined) =>
+          value?.value !== undefined,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <NumberInput
+              onChange={(value) =>
+                field.onChange(
+                  mapFormDataToAnswer(
+                    QuestionType.NumberQuestionType,
+                    questionId,
+                    value
+                  )
+                )
+              }
+              onBlur={field.onBlur}
+              value={(field?.value as NumberAnswer)?.value}
+            />
+          </FormControl>
+
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export const FormQuestionTextInput = ({
+  questionId,
+  isRequired,
+}: {
+  questionId: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <FormField
+      control={control}
+      name={`question-${questionId}`}
+      rules={{
+        required: isRequired,
+        validate: (value: TextAnswer | undefined) => value?.text !== "",
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <Input
+              onChange={(evemt) =>
+                field.onChange(
+                  mapFormDataToAnswer(
+                    QuestionType.TextQuestionType,
+                    questionId,
+                    evemt.target.value
+                  )
+                )
+              }
+              onBlur={field.onBlur}
+              value={(field?.value as TextAnswer)?.text}
+            />
+          </FormControl>
+
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionMultiSelectInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionMultiSelectInput.tsx
new file mode 100644
index 000000000..e7f73a0a5
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionMultiSelectInput.tsx
@@ -0,0 +1,123 @@
+import {
+  AnswerType,
+  type MultiSelectAnswer,
+  type MultiSelectQuestion,
+  type SelectedOption,
+} from "@/common/types";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useFormContext } from "react-hook-form";
+import { useFreeTextInput } from "../hooks/useFreeTextInput";
+import { FormQuestionFreeTextInput } from "./FormQuestionFreeTextInput";
+
+export const FormQuestionMultiSelectInput = ({
+  question,
+  language,
+  isRequired,
+}: {
+  question: MultiSelectQuestion;
+  language: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+
+  const { fieldNames, shouldDisplayFreeTextInput } = useFreeTextInput(question);
+
+  const addOptionToMultiSelectAnswer = (
+    questionId: string,
+    currentValue: MultiSelectAnswer,
+    option: SelectedOption
+  ) => {
+    let selections = currentValue?.selection ?? [];
+    selections = [...selections, option];
+    let multiselectAnswer: MultiSelectAnswer = {
+      $answerType: AnswerType.MultiSelectAnswerType,
+      questionId,
+      selection: selections,
+    };
+
+    return multiselectAnswer;
+  };
+  const removeSelectionFromMultiSelectAnswer = (
+    questionId: string,
+    currentValue: MultiSelectAnswer,
+    optionId: string
+  ) => {
+    let selections = currentValue?.selection ?? [];
+    const filteredSelections = selections.filter(
+      (selected) => selected.optionId !== optionId
+    );
+
+    const multiselectAnswer: MultiSelectAnswer = {
+      $answerType: AnswerType.MultiSelectAnswerType,
+      questionId,
+      selection: filteredSelections,
+    };
+    return multiselectAnswer;
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FormField
+        control={control}
+        name={fieldNames.parent}
+        rules={{
+          required: isRequired,
+          validate: (value: MultiSelectAnswer | undefined) =>
+            value?.selection && value.selection.length > 0,
+        }}
+        render={({ field }) => (
+          <FormItem>
+            {question.options.map((option) => {
+              const isChecked = field.value?.selection?.some(
+                (opt: SelectedOption) => opt.optionId === option.id
+              );
+
+              return (
+                <FormItem
+                  key={option.id}
+                  className="flex flex-row items-start space-x-3 space-y-0"
+                >
+                  <FormControl>
+                    <Checkbox
+                      checked={isChecked}
+                      onCheckedChange={(checked) => {
+                        const newValue = checked
+                          ? addOptionToMultiSelectAnswer(
+                              question.id,
+                              field.value,
+                              {
+                                optionId: option.id,
+                              }
+                            )
+                          : removeSelectionFromMultiSelectAnswer(
+                              question.id,
+                              field.value,
+                              option.id
+                            );
+                        field.onChange(newValue);
+                      }}
+                    />
+                  </FormControl>
+                  <FormLabel className="text-sm font-normal">
+                    {option.text[language]}
+                  </FormLabel>
+                </FormItem>
+              );
+            })}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {shouldDisplayFreeTextInput && (
+        <FormQuestionFreeTextInput question={question} language={language} />
+      )}
+    </div>
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionRatingInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionRatingInput.tsx
new file mode 100644
index 000000000..2155c7633
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionRatingInput.tsx
@@ -0,0 +1,62 @@
+import {
+  QuestionType,
+  type NumberAnswer,
+  type RatingAnswer,
+  type RatingQuestion,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { RatingGroup } from "@/components/ui/ratings";
+import { useFormContext } from "react-hook-form";
+import { mapFormDataToAnswer, ratingScaleToNumber } from "../utils";
+
+export const FormQuestionRatingInput = ({
+  question,
+  language,
+  isRequired,
+}: {
+  question: RatingQuestion;
+  language: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <FormField
+      control={control}
+      name={`question-${question.id}`}
+      rules={{
+        required: isRequired,
+        validate: (value: NumberAnswer | undefined) =>
+          value?.value !== undefined,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <RatingGroup
+              scale={ratingScaleToNumber(question.scale)}
+              lowerLabel={question.lowerLabel?.[language]}
+              upperLabel={question.upperLabel?.[language]}
+              onValueChange={(value) =>
+                field.onChange(
+                  mapFormDataToAnswer(
+                    QuestionType.RatingQuestionType,
+                    question.id,
+                    value
+                  )
+                )
+              }
+              onBlur={field.onBlur}
+              value={(field?.value as RatingAnswer)?.value?.toString()}
+            />
+          </FormControl>
+
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionSingleSelectInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionSingleSelectInput.tsx
new file mode 100644
index 000000000..a5cb0e924
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/components/FormQuestionSingleSelectInput.tsx
@@ -0,0 +1,79 @@
+import {
+  QuestionType,
+  type SingleSelectAnswer,
+  type SingleSelectQuestion,
+} from "@/common/types";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useFormContext } from "react-hook-form";
+import { useFreeTextInput } from "../hooks/useFreeTextInput";
+import { mapFormDataToAnswer } from "../utils";
+import { FormQuestionFreeTextInput } from "./FormQuestionFreeTextInput";
+
+export const FormQuestionSingleSelectInput = ({
+  question,
+  language,
+  isRequired,
+}: {
+  question: SingleSelectQuestion;
+  language: string;
+  isRequired?: boolean;
+}) => {
+  const { control } = useFormContext();
+  const { fieldNames, shouldDisplayFreeTextInput } = useFreeTextInput(question);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FormField
+        control={control}
+        name={fieldNames.parent}
+        rules={{ required: isRequired }}
+        render={({ field }) => (
+          <FormItem className="space-y-3">
+            <FormControl>
+              <RadioGroup
+                onValueChange={(value) =>
+                  field.onChange(
+                    mapFormDataToAnswer(
+                      QuestionType.SingleSelectQuestionType,
+                      question.id,
+                      value
+                    )
+                  )
+                }
+                value={
+                  (field?.value as SingleSelectAnswer)?.selection?.optionId
+                }
+                className="flex flex-col space-y-1"
+              >
+                {question.options.map((option) => (
+                  <FormItem
+                    className="flex items-center space-x-3 space-y-0"
+                    key={`${question.id}-${option.id}`}
+                  >
+                    <FormControl>
+                      <RadioGroupItem value={option.id} />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      {option.text[language]}
+                    </FormLabel>
+                  </FormItem>
+                ))}
+              </RadioGroup>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      {shouldDisplayFreeTextInput && (
+        <FormQuestionFreeTextInput question={question} language={language} />
+      )}
+    </div>
+  );
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFreeTextInput.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFreeTextInput.tsx
new file mode 100644
index 000000000..5b9858ce8
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useFreeTextInput.tsx
@@ -0,0 +1,71 @@
+import type {
+  MultiSelectAnswer,
+  MultiSelectQuestion,
+  SelectedOption,
+  SingleSelectAnswer,
+  SingleSelectQuestion,
+} from "@/common/types";
+import { isSingleSelectAnswer } from "@/lib/utils";
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+
+export const useFreeTextInput = (
+  question: SingleSelectQuestion | MultiSelectQuestion
+) => {
+  const freeTextOption = question.options.find((option) => option.isFreeText);
+  const fieldNames = {
+    parent: `question-${question.id}`,
+    freeText: `question-${question.id}-ft-${freeTextOption?.id ?? "0"}`,
+  };
+
+  const { control } = useFormContext();
+  const currentValueFromParent = useWatch({ control, name: fieldNames.parent });
+
+  const isFreeTextOptionSelected = (
+    fieldValue: SingleSelectAnswer | MultiSelectAnswer
+  ) => {
+    if (!freeTextOption || !fieldValue || !fieldValue.selection) return false;
+
+    if (isSingleSelectAnswer(fieldValue))
+      return fieldValue.selection.optionId === freeTextOption.id;
+
+    if (fieldValue.selection.length === 0) return false;
+
+    const currentSelectionSet = new Set(
+      fieldValue.selection.map((opt) => opt.optionId)
+    );
+
+    return currentSelectionSet.has(freeTextOption.id);
+  };
+
+  const addFreeTextToOption = (text: string) => {
+    if (isSingleSelectAnswer(currentValueFromParent)) {
+      return {
+        ...currentValueFromParent,
+        selection: { ...currentValueFromParent.selection, text },
+      };
+    }
+
+    const updatedData = currentValueFromParent?.selection?.map(
+      (selection: SelectedOption) => {
+        if (selection.optionId === freeTextOption?.id)
+          return { ...selection, text };
+        return selection;
+      }
+    );
+    return { ...currentValueFromParent, selection: updatedData };
+  };
+
+  const shouldDisplayFreeTextInput = useMemo(
+    () => isFreeTextOptionSelected(currentValueFromParent),
+    [currentValueFromParent]
+  );
+
+  return {
+    freeTextOption,
+    fieldNames,
+    shouldDisplayFreeTextInput,
+    isFreeTextOptionSelected,
+    addFreeTextToOption,
+  };
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useShouldDisplayQuestion.ts b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useShouldDisplayQuestion.ts
new file mode 100644
index 000000000..eb6d66973
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/hooks/useShouldDisplayQuestion.ts
@@ -0,0 +1,128 @@
+import {
+  AnswerType,
+  DisplayLogicCondition,
+  type BaseAnswer,
+  type BaseQuestion,
+  type MultiSelectAnswer,
+  type NumberAnswer,
+  type RatingAnswer,
+  type SingleSelectAnswer,
+  type TextAnswer,
+} from "@/common/types";
+import { useEffect, useState } from "react";
+import { useWatch, type Control } from "react-hook-form";
+
+const mapDisplayConditionToMath = (
+  operand1: string,
+  operand2: string,
+  condition: DisplayLogicCondition
+) => {
+  switch (condition) {
+    case "Equals":
+      return operand1 === operand2;
+    case "GreaterEqual":
+      return operand1 >= operand2;
+    case "GreaterThan":
+      return operand1 > operand2;
+    case "LessEqual":
+      return operand1 <= operand2;
+    case "LessThan":
+      return operand1 < operand2;
+    case "NotEquals":
+      return operand1 !== operand2;
+    default:
+      return false;
+  }
+};
+
+export const useShouldDisplayQuestion = ({
+  question,
+  control,
+}: {
+  question: BaseQuestion;
+  control: Control;
+}) => {
+  const [shouldDisplayQuestion, setShouldDisplay] = useState(false);
+
+  const parentAnswer: BaseAnswer = useWatch({
+    control,
+    name: `question-${question.displayLogic?.parentQuestionId}`,
+  });
+
+  const updateShouldDisplay = () => {
+    let shouldDisplay = false;
+    const condition = question.displayLogic!.condition;
+    const value = question.displayLogic!.value;
+
+    switch (parentAnswer.$answerType) {
+      case AnswerType.NumberAnswerType: {
+        const parent = parentAnswer as NumberAnswer;
+
+        if (!parent.value) {
+          shouldDisplay = false;
+          break;
+        }
+
+        shouldDisplay = mapDisplayConditionToMath(
+          parent.value!.toString(),
+          value,
+          condition
+        );
+        break;
+      }
+
+      case AnswerType.TextAnswerType: {
+        const answer = parentAnswer as TextAnswer;
+        if (!answer.text) break;
+
+        shouldDisplay = mapDisplayConditionToMath(
+          answer.text,
+          value,
+          condition
+        );
+
+        break;
+      }
+
+      case AnswerType.MultiSelectAnswerType: {
+        const parent = parentAnswer as MultiSelectAnswer;
+
+        if (!parent.selection) break;
+        shouldDisplay = !!parent.selection.find(
+          (option) => option.optionId === value
+        );
+        break;
+      }
+
+      case AnswerType.SingleSelectAnswerType: {
+        const parent = parentAnswer as SingleSelectAnswer;
+        if (!parent.selection) break;
+
+        shouldDisplay = parent.selection.optionId === value;
+        break;
+      }
+
+      case AnswerType.RatingAnswerType: {
+        const parent = parentAnswer as RatingAnswer;
+        if (!parent.value) break;
+
+        shouldDisplay = mapDisplayConditionToMath(
+          parent.value.toString(),
+          value,
+          condition
+        );
+        break;
+      }
+      default:
+        break;
+    }
+    setShouldDisplay(shouldDisplay);
+  };
+
+  useEffect(() => {
+    if (!parentAnswer) return;
+    updateShouldDisplay();
+  }, [parentAnswer]);
+
+  return shouldDisplayQuestion;
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/utils.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/utils.tsx
new file mode 100644
index 000000000..7b269788a
--- /dev/null
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/features/forms/utils.tsx
@@ -0,0 +1,100 @@
+import {
+  AnswerType,
+  QuestionType,
+  RatingScaleType,
+  type MultiSelectAnswer,
+  type NumberAnswer,
+  type RatingAnswer,
+  type SingleSelectAnswer,
+  type TextAnswer,
+} from "@/common/types";
+
+export const mapFormDataToAnswer = (
+  questionType: QuestionType,
+  questionId: string,
+  value: any
+) => {
+  switch (questionType) {
+    case QuestionType.NumberQuestionType:
+      const numberAnswer: NumberAnswer = {
+        $answerType: AnswerType.NumberAnswerType,
+        questionId,
+        value,
+      };
+      return numberAnswer;
+
+    case QuestionType.TextQuestionType:
+      const textAnswer: TextAnswer = {
+        $answerType: AnswerType.TextAnswerType,
+        questionId,
+        text: value,
+      };
+      return textAnswer;
+
+    case QuestionType.MultiSelectQuestionType:
+      let selectionArray = value
+        ? value.map((val: string) => {
+            return { optionId: val };
+          })
+        : [];
+      const multiselectAnswer: MultiSelectAnswer = {
+        $answerType: AnswerType.MultiSelectAnswerType,
+        questionId,
+        selection: selectionArray,
+      };
+      return multiselectAnswer;
+
+    case QuestionType.SingleSelectQuestionType:
+      const singleSelectAnswer: SingleSelectAnswer = {
+        $answerType: AnswerType.SingleSelectAnswerType,
+        questionId,
+        selection: { optionId: value },
+      };
+
+      return singleSelectAnswer;
+
+    case QuestionType.RatingQuestionType:
+      const ratingAnswer: RatingAnswer = {
+        $answerType: AnswerType.RatingAnswerType,
+        questionId,
+        value: Number(value),
+      };
+
+      return ratingAnswer;
+
+    default:
+      return value;
+  }
+};
+
+export function ratingScaleToNumber(scale: RatingScaleType): number {
+  switch (scale) {
+    case RatingScaleType.OneTo3: {
+      return 3;
+    }
+    case RatingScaleType.OneTo4: {
+      return 4;
+    }
+    case RatingScaleType.OneTo5: {
+      return 5;
+    }
+    case RatingScaleType.OneTo6: {
+      return 6;
+    }
+    case RatingScaleType.OneTo7: {
+      return 7;
+    }
+    case RatingScaleType.OneTo8: {
+      return 8;
+    }
+    case RatingScaleType.OneTo9: {
+      return 9;
+    }
+    case RatingScaleType.OneTo10: {
+      return 10;
+    }
+    default: {
+      return 5;
+    }
+  }
+}
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
index 39c87a978..9817f2102 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingForm.tsx
@@ -49,7 +49,7 @@ const CitizenReportStepperComponent = () => {
   const methods = useStepper();
 
   const form = useForm({
-    mode: "onSubmit",
+    mode: "onChange",
     resolver: methods.current.schema
       ? zodResolver(methods.current.schema)
       : undefined,
@@ -80,7 +80,7 @@ const CitizenReportStepperComponent = () => {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
         <StepperNavigation>
           {methods.all.map((step) => (
             <StepperStep
@@ -112,26 +112,31 @@ const CitizenReportStepperComponent = () => {
               Previous
             </Button>
           )}
+          {methods.isLast && (
+            <Button variant="secondary" onClick={methods.reset}>
+              Reset
+            </Button>
+          )}
           <Button
-            type="submit"
             onClick={() => {
               if (methods.isLast) {
-                return methods.reset();
+                return form.handleSubmit(onSubmit)();
               }
               methods.beforeNext(async () => {
                 const fieldsToValidate: any = methods.current.schema
                   ? (Object.keys(methods.current.schema.shape) as string[])
                   : undefined;
 
-                console.log(fieldsToValidate);
-                const valid = await form.trigger(fieldsToValidate);
+                const valid = fieldsToValidate
+                  ? await form.trigger(fieldsToValidate)
+                  : await form.trigger();
                 if (!valid) return false;
 
                 return true;
               });
             }}
           >
-            {methods.isLast ? "Reset" : "Next"}
+            {methods.isLast ? "Submit" : "Next"}
           </Button>
         </StepperControls>
       </form>
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx
index b579d1dc8..1dc8caf04 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/queries/use-forms.tsx
@@ -1,4 +1,6 @@
-import { getForms } from "@/api/get-forms";
+import { getFormById, getForms } from "@/api/get-forms";
+import type { FormModel } from "@/common/types";
+import { queryClient } from "@/main";
 import { queryOptions, useQuery } from "@tanstack/react-query";
 const STALE_TIME = 1000 * 60 * 15; // 15 minutes
 
@@ -14,3 +16,22 @@ export const formsOptions = () => {
 export const useForms = () => {
   return useQuery(formsOptions());
 };
+
+export const formQueryOptions = (id: string) => {
+  return queryOptions({
+    queryKey: ["forms", id],
+    queryFn: () => getFormById(id),
+    staleTime: STALE_TIME,
+    initialData: () => {
+      const formData = (
+        queryClient.getQueryData(["forms"]) as FormModel[]
+      )?.find((form) => form.id === id);
+
+      return formData;
+    },
+  });
+};
+
+export const useFormById = (id: string) => {
+  return useQuery(formQueryOptions(id));
+};
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
index 1978b9597..f98d0e657 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/$formId.tsx
@@ -1,10 +1,33 @@
+import { currentFormLanguageAtom } from "@/features/forms/atoms";
 import NotFound from "@/pages/NotFound";
 import SubmitCitizenReport from "@/pages/ReportingForm";
-import { formsOptions } from "@/queries/use-forms";
-import { createFileRoute } from "@tanstack/react-router";
+import { formQueryOptions } from "@/queries/use-forms";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { useSetAtom } from "jotai";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/forms/$formId")({
-  loader: (opts) => opts.context.queryClient.ensureQueryData(formsOptions()),
-  component: SubmitCitizenReport,
+  loader: async (opts) => {
+    const { formId } = opts.params;
+    const formData = await opts.context.queryClient.ensureQueryData(
+      formQueryOptions(formId)
+    );
+
+    if (!formData) throw notFound();
+    return formData;
+  },
+  component: () => {
+    const { formId } = Route.useParams();
+    const { data } = useSuspenseQuery(formQueryOptions(formId));
+    const setCurrentLanguage = useSetAtom(currentFormLanguageAtom);
+
+    useEffect(() => {
+      if (!data?.defaultLanguage) return;
+      setCurrentLanguage(data.defaultLanguage);
+    }, [data]);
+
+    return <SubmitCitizenReport />;
+  },
   notFoundComponent: NotFound,
 });