From 0843c55f5907939f44220a8e68e96b951f4f72c2 Mon Sep 17 00:00:00 2001
From: ejminguez <ebminguez@up.edu.ph>
Date: Mon, 13 Oct 2025 00:29:24 +0800
Subject: [PATCH 1/2] feat: updated evaluation questions

---
 frontend/src/components/Slider.tsx            |  11 +-
 frontend/src/components/TextArea.tsx          |  15 +-
 frontend/src/hooks/usePyconEvaluationForm.ts  | 100 ++++++++++
 frontend/src/model/pycon/evaluations.ts       | 115 ++++++++++++
 .../pages/client/pycon/evaluate/Evaluate.tsx  |  88 +++++++++
 .../pycon/evaluate/EvaluateFormSkeleton.tsx   |  32 ++++
 .../pycon/evaluate/PyconEvaluatePage.tsx      |  17 ++
 .../pycon/evaluate/footer/EvaluateFooter.tsx  |  93 ++++++++++
 .../evaluate/footer/useEvaluateFooter.ts      | 133 ++++++++++++++
 .../questionBuilder/QuestionBuilder.tsx       |  27 +++
 .../questionBuilder/QuestionTypeSwitch.tsx    | 106 +++++++++++
 .../questionBuilder/questionSchemaBuilder.ts  |  67 +++++++
 .../questionBuilder/questionsConfig.ts        | 173 ++++++++++++++++++
 .../pycon/evaluate/steps/ClaimCertificate.tsx |  67 +++++++
 .../pycon/evaluate/steps/EvaluationSteps.ts   |  27 +++
 .../pycon/evaluate/steps/EventInformation.tsx |  64 +++++++
 .../pycon/evaluate/steps/shareToLinkedIn.ts   |  40 ++++
 .../evaluate/steps/useClaimCertificate.ts     |  35 ++++
 .../client/pycon/evaluate/useEvaluatePage.ts  |  18 ++
 frontend/src/routes/routes.tsx                |   2 +-
 20 files changed, 1221 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/hooks/usePyconEvaluationForm.ts
 create mode 100644 frontend/src/model/pycon/evaluations.ts
 create mode 100644 frontend/src/pages/client/pycon/evaluate/Evaluate.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/EvaluateFormSkeleton.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/PyconEvaluatePage.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts
 create mode 100644 frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionBuilder.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts
 create mode 100644 frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts
 create mode 100644 frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/steps/EvaluationSteps.ts
 create mode 100644 frontend/src/pages/client/pycon/evaluate/steps/EventInformation.tsx
 create mode 100644 frontend/src/pages/client/pycon/evaluate/steps/shareToLinkedIn.ts
 create mode 100644 frontend/src/pages/client/pycon/evaluate/steps/useClaimCertificate.ts
 create mode 100644 frontend/src/pages/client/pycon/evaluate/useEvaluatePage.ts

diff --git a/frontend/src/components/Slider.tsx b/frontend/src/components/Slider.tsx
index 32daef2a..07bdd5d1 100644
--- a/frontend/src/components/Slider.tsx
+++ b/frontend/src/components/Slider.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import durian from '@/assets/pycon/durian.png';
 import { cn } from '@/utils/classes';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
@@ -12,11 +13,13 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, R
       )}
       {...props}
     >
-      <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary-200 dark:bg-background-100">
-        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full dark:bg-background-100 bg-pycon-custard-light">
+        <SliderPrimitive.Range className="absolute h-full bg-pycon-orange" />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-      <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      <SliderPrimitive.Thumb
+        className="block h-8 w-8 bg-cover bg-center transition-transform hover:scale-110 focus-visible:outline-none disabled:opacity-50"
+        style={{ backgroundImage: `url(${durian})` }}
+      />
     </SliderPrimitive.Root>
   )
 );
diff --git a/frontend/src/components/TextArea.tsx b/frontend/src/components/TextArea.tsx
index a73bf3f8..237a384b 100644
--- a/frontend/src/components/TextArea.tsx
+++ b/frontend/src/components/TextArea.tsx
@@ -1,20 +1,27 @@
 import * as React from 'react';
 import { cn } from '@/utils/classes';
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant?: 'default' | 'custard';
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, variant = 'default', ...props }, ref) => {
+  const variantClass = variant === 'custard' ? 'bg-[#feefdb] text-[#312541] placeholder:text-gray-600' : 'bg-input';
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
   return (
     <textarea
+      ref={ref}
       className={cn(
-        'flex min-h-[100px] w-full rounded-md border border-border bg-input px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-5',
+        'flex min-h-[100px] w-full rounded-md border border-border px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+
+        variantClass,
         className
       )}
-      ref={ref}
       {...props}
     />
   );
 });
+
 Textarea.displayName = 'Textarea';
 
 export { Textarea };
diff --git a/frontend/src/hooks/usePyconEvaluationForm.ts b/frontend/src/hooks/usePyconEvaluationForm.ts
new file mode 100644
index 00000000..24818b93
--- /dev/null
+++ b/frontend/src/hooks/usePyconEvaluationForm.ts
@@ -0,0 +1,100 @@
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { ClaimCertificateResponse, postEvaluation } from '@/api/evaluations';
+import { CustomAxiosError } from '@/api/utils/createApi';
+import { QuestionConfigItem, mapFormValuesToEvaluateCreate } from '@/model/pycon/evaluations';
+import { useNotifyToast } from '@/hooks/useNotifyToast';
+import { questionSchemaBuilder } from '@/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder';
+import { EVALUATION_QUESTIONS_1, EVALUATION_QUESTIONS_2 } from '@/pages/client/pycon/evaluate/questionBuilder/questionsConfig';
+import { EvaluateStepId } from '@/pages/client/pycon/evaluate/steps/EvaluationSteps';
+import { useApi } from './useApi';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+export interface DefaultEvaluateFormValues {
+  email: string;
+  certificate: ClaimCertificateResponse;
+  [x: string]: any;
+}
+
+export type DefaultEvaluateField = string;
+export type DefaultEvaluateFieldMap = Partial<Record<EvaluateStepId, DefaultEvaluateField[]>>;
+
+export const usePyconEvaluationForm = (questions: QuestionConfigItem[], eventId: string) => {
+  const EvaluateFormSchema = questionSchemaBuilder(questions).extend({
+    email: z.string().optional(),
+    certificate: z.custom<ClaimCertificateResponse>().optional()
+  });
+
+  type EvaluateFormValues = z.infer<typeof EvaluateFormSchema> & {
+    certificate?: ClaimCertificateResponse;
+  };
+
+  const api = useApi();
+  const { errorToast, successToast } = useNotifyToast();
+
+  const form = useForm<EvaluateFormValues>({
+    mode: 'onChange',
+    resolver: zodResolver(EvaluateFormSchema),
+    defaultValues: {
+      email: '',
+      ...questions.reduce(
+        (acc, question) => {
+          if (question.questionType === 'slider') {
+            acc[question.name] = [];
+          } else if (question.questionType === 'radio_buttons') {
+            acc[question.name] = '';
+          } else if (question.questionType === 'multiple_answers') {
+            acc[question.name] = [];
+          } else {
+            acc[question.name] = '';
+          }
+          return acc;
+        },
+        {} as Record<string, string | number | number[]>
+      )
+    }
+  });
+
+  type EvaluateField = keyof EvaluateFormValues;
+  type EvaluateFieldMap = Partial<Record<EvaluateStepId, EvaluateField[]>>;
+
+  const EVALUATE_FIELDS: EvaluateFieldMap = {
+    EventDetails: [],
+    Evaluation_1: EVALUATION_QUESTIONS_1.map((question) => question.name) as EvaluateField[],
+    Evaluation_2: EVALUATION_QUESTIONS_2.map((question) => question.name) as EvaluateField[]
+  };
+
+  const submit = form.handleSubmit(async (values) => {
+    const { certificate } = values;
+    if (!certificate) {
+      errorToast({
+        title: 'Error',
+        description: 'Certificate information is missing. Please try again.'
+      });
+      return;
+    }
+
+    const { registrationId } = certificate;
+    try {
+      const response = await api.execute(postEvaluation(eventId, registrationId, mapFormValuesToEvaluateCreate(values)));
+      if (response.status === 200) {
+        successToast({
+          title: 'Evaluation submitted successfully!',
+          description: 'Thank you for submitting your evaluation. You may now access your certificate.'
+        });
+      }
+    } catch (e) {
+      const { errorData } = e as CustomAxiosError;
+      errorToast({
+        title: 'Error in submitting evaluation',
+        description: errorData?.message || errorData?.detail?.[0]?.msg || 'An error occurred while submitting'
+      });
+    }
+  });
+
+  return {
+    form,
+    submit,
+    EVALUATE_FIELDS
+  };
+};
diff --git a/frontend/src/model/pycon/evaluations.ts b/frontend/src/model/pycon/evaluations.ts
new file mode 100644
index 00000000..9125b33e
--- /dev/null
+++ b/frontend/src/model/pycon/evaluations.ts
@@ -0,0 +1,115 @@
+type QuestionType =
+  | 'text_short'
+  | 'text_long'
+  | 'multiple_choice_dropdown'
+  | 'multiple_choice'
+  | 'multiple_choice_dropdown'
+  | 'multiple_answers'
+  | 'slider'
+  | 'radio_buttons';
+
+export interface QuestionConfigItem {
+  questionType: QuestionType;
+  name: string;
+  question: string;
+  options?: string | string[];
+  required?: boolean;
+  answer?: string | string[];
+}
+
+export interface EvaluationResponse {
+  answer: string | null;
+  answerScale: number | null;
+  multipleAnswers: string[] | null;
+  booleanAnswer: boolean | null;
+  questionType: string | null;
+  question: string | null;
+  eventId: string;
+  createDate: string;
+  updateDate: string;
+}
+
+export interface Evaluation {
+  registration: {
+    firstName: string;
+    lastName: string;
+    contactNumber: string;
+    email: string;
+    registrationId: string;
+  };
+  evaluationList: EvaluationResponse[];
+}
+
+export const mapFormValuesToEvaluateCreate = (data: any) => {
+  const values = { ...data };
+  delete values.email;
+  delete values.certificate;
+  return convertToEvaluationList(values);
+};
+
+export const convertToEvaluationList = (data: any) => {
+  // Question type mappings
+
+  const sliderQuestions = [
+    'how_would_you_rate_pycon_davao_overall',
+    'how_satisfied_were_you_with_the_content_and_presentations',
+    'how_likely_are_you_to_recommend_this_event_to_other_python_developers_or_enthusiasts_based_on_the_community_support_provided',
+    'how_would_you_rate_event_organization_and_logistics',
+    'were_the_event_schedule_and_timing_convenient_for_you',
+    'did_you_find_opportunities_for_networking_valuable',
+    'how_would_you_rate_the_networking_opportunities_provided',
+    'how_likely_are_you_to_attend_future_pycon_davao_events'
+  ];
+
+  const textLongQuestions = [
+    'what_was_the_highlight_of_the_event_for_you',
+    'is_there_anything_specific_you_would_like_to_commend_about_the_event',
+    'which_sessions_or_topics_did_you_find_most_valuable',
+    'were_there_any_topics_or_sessions_you_felt_were_missing',
+    'have_you_attended_python_events_before_if_so_what_kind_of_community_support_did_you_find_helpful_in_previous_events',
+    'did_you_encounter_any_problems_with_organization_and_logistics',
+    'what_could_have_been_improved_related_to_the_networking_and_interaction_aspects_of_the_event',
+    'what_suggestions_do_you_have_for_improving_future_pycon_events',
+    'is_there_anything_else_you_would_like_to_share_about_your_experience_at_the_event'
+  ];
+
+  const radioButtonQuestions = ['were_the_venue_facilities_adequate'];
+
+  return Object.keys(data).map((key) => {
+    const response: Omit<EvaluationResponse, 'eventId' | 'createDate' | 'updateDate'> = {
+      answer: null,
+      answerScale: null,
+      multipleAnswers: null,
+      booleanAnswer: null,
+      questionType: null,
+      question: null
+    };
+
+    const value = data[key];
+
+    if (sliderQuestions.includes(key)) {
+      response.questionType = 'multiple_choice';
+      response.answerScale = Array.isArray(value) ? value[0] : value;
+    } else if (radioButtonQuestions.includes(key)) {
+      response.questionType = 'boolean';
+      if (typeof value === 'string') {
+        const numValue = parseInt(value);
+        response.booleanAnswer = numValue >= 3;
+        response.answerScale = numValue;
+      } else if (typeof value === 'number') {
+        response.booleanAnswer = value >= 3;
+        response.answerScale = value;
+      }
+    } else if (textLongQuestions.includes(key)) {
+      response.questionType = 'text';
+      response.answer = value;
+    } else {
+      // Fallback for any unknown question types
+      response.questionType = 'text';
+      response.answer = value;
+    }
+
+    response.question = key;
+    return response;
+  });
+};
diff --git a/frontend/src/pages/client/pycon/evaluate/Evaluate.tsx b/frontend/src/pages/client/pycon/evaluate/Evaluate.tsx
new file mode 100644
index 00000000..a301f265
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/Evaluate.tsx
@@ -0,0 +1,88 @@
+import { FC, useState } from 'react';
+import { FormProvider } from 'react-hook-form';
+import ErrorPage from '@/components/ErrorPage';
+import { FormDescription, FormError, FormItem, FormItemContainer, FormLabel } from '@/components/Form';
+import Input from '@/components/Input';
+import Separator from '@/components/Separator';
+import { cn } from '@/utils/classes';
+import { useActiveBreakpoints } from '@/hooks/useActiveBreakpoints';
+import { DefaultEvaluateField, usePyconEvaluationForm } from '@/hooks/usePyconEvaluationForm';
+import EventDetails from '../register/EventDetails';
+import Stepper from '../register/steps/Stepper';
+import EvaluateFormSkeleton from './EvaluateFormSkeleton';
+import EvaluateFooter from './footer/EvaluateFooter';
+import QuestionBuilder from './questionBuilder/QuestionBuilder';
+import { EVALUATION_QUESTIONS_1, EVALUATION_QUESTIONS_2 } from './questionBuilder/questionsConfig';
+import ClaimCertificate from './steps/ClaimCertificate';
+import { EvaluateStep, EvaluateSteps, STEP_CLAIM_CERTIFICATE, STEP_EVENT_DETAILS } from './steps/EvaluationSteps';
+import { useEvaluatePage } from './useEvaluatePage';
+
+interface Props {
+  eventId: string;
+}
+
+const Evaluate: FC<Props> = ({ eventId }) => {
+  const [currentStep, setCurrentStep] = useState<EvaluateStep>(STEP_EVENT_DETAILS);
+  const [shouldBeVertical] = useActiveBreakpoints('md');
+
+  const { response, isPending } = useEvaluatePage(eventId);
+  const { form, EVALUATE_FIELDS, submit } = usePyconEvaluationForm([...EVALUATION_QUESTIONS_1, ...EVALUATION_QUESTIONS_2], eventId);
+
+  if (isPending) return <EvaluateFormSkeleton />;
+  if (!response || (response && !response.data && response.errorData)) return <ErrorPage error={response} />;
+  if (response.data.status !== 'completed') return <ErrorPage />;
+
+  const eventInfo = response.data;
+  const fieldsToCheck: DefaultEvaluateField[] = EVALUATE_FIELDS[currentStep.id] || [];
+  const STEPS = EvaluateSteps;
+  const showStepper = currentStep.id !== 'EventDetails' && currentStep.id !== 'ClaimCertificate';
+
+  return (
+    <section className="flex flex-col items-center px-4">
+      <div className="w-full max-w-6xl space-y-6 flex flex-col items-center">
+        <FormProvider {...form}>
+          <div className="flex flex-col md:flex-row items-start gap-5 lg:gap-15 w-full lg:mt-10">
+            {showStepper && (
+              <aside className="w-full md:w-1/4 md:min-w-[240px] lg:h-[50vh]">
+                {showStepper && (
+                  <div className={cn('my-8', shouldBeVertical && 'h-[700px]')}>
+                    <Stepper
+                      orientation={shouldBeVertical ? 'vertical' : 'horizontal'}
+                      steps={STEPS}
+                      currentStep={currentStep}
+                      stepsToExclude={[STEP_CLAIM_CERTIFICATE]}
+                    />
+                  </div>
+                )}
+              </aside>
+            )}
+
+            <main className="flex-1">
+              {currentStep.id !== 'EventDetails' && currentStep.title && <h1 className="text-xl text-center md:text-left mb-4">{currentStep.title}</h1>}
+              <div className="space-y-4">
+                {currentStep.id === 'EventDetails' && <EventDetails event={eventInfo} />}
+                {currentStep.id === 'Evaluation_1' && <QuestionBuilder questions={EVALUATION_QUESTIONS_1} />}
+                {currentStep.id === 'Evaluation_2' && <QuestionBuilder questions={EVALUATION_QUESTIONS_2} />}
+              </div>
+
+              {(currentStep.id === 'Evaluation_1' || currentStep.id === 'Evaluation_2') && <Separator className="my-4" />}
+
+              <EvaluateFooter
+                event={eventInfo}
+                steps={STEPS}
+                currentStep={currentStep}
+                fieldsToCheck={fieldsToCheck}
+                setCurrentStep={setCurrentStep}
+                submitForm={submit}
+              />
+            </main>
+          </div>
+
+          {currentStep.id === 'ClaimCertificate' && <ClaimCertificate eventId={eventId!} />}
+        </FormProvider>
+      </div>
+    </section>
+  );
+};
+
+export default Evaluate;
diff --git a/frontend/src/pages/client/pycon/evaluate/EvaluateFormSkeleton.tsx b/frontend/src/pages/client/pycon/evaluate/EvaluateFormSkeleton.tsx
new file mode 100644
index 00000000..9fe358a8
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/EvaluateFormSkeleton.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import Separator from '@/components/Separator';
+import Skeleton from '@/components/Skeleton';
+
+const EvaluateFormSkeleton: FC = () => {
+  return (
+    <section className="flex flex-col items-center px-4">
+      <div className="w-full max-w-2xl flex flex-col items-center">
+        <Skeleton className="w-12 h-12 rounded-full" />
+        <Skeleton className="w-full h-56 rounded-md my-8" />
+        <Skeleton className="w-full h-8 rounded-sm mb-2" />
+        <Skeleton className="w-full h-5 rounded-sm my-2" />
+        <Skeleton className="w-full h-6 rounded-sm mt-2 mb-10" />
+
+        <div className="w-full">
+          <div className="mb-12">
+            <Separator />
+            <Skeleton className="w-full h-12 rounded-sm mt-4 mb-10" />
+            <Skeleton className="w-full h-12 rounded-sm mb-2" />
+            <Skeleton className="w-[40%] h-4 rounded-sm" />
+          </div>
+
+          <div className="flex w-full justify-around my-8">
+            <Skeleton className="w-28 h-12 rounded-md" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EvaluateFormSkeleton;
diff --git a/frontend/src/pages/client/pycon/evaluate/PyconEvaluatePage.tsx b/frontend/src/pages/client/pycon/evaluate/PyconEvaluatePage.tsx
new file mode 100644
index 00000000..669a0e71
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/PyconEvaluatePage.tsx
@@ -0,0 +1,17 @@
+import { useParams } from 'react-router-dom';
+import ErrorPage from '@/components/ErrorPage';
+import Evaluate from './Evaluate.tsx';
+
+const EvaluatePage = () => {
+  const { eventId } = useParams();
+
+  if (!eventId) {
+    return <ErrorPage />;
+  }
+
+  return <Evaluate eventId={eventId} />;
+};
+
+export const Component = EvaluatePage;
+
+export default EvaluatePage;
diff --git a/frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx b/frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx
new file mode 100644
index 00000000..012390a4
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx
@@ -0,0 +1,93 @@
+import Button from '@/components/Button';
+import { Event } from '@/model/events';
+import { EvaluateStep } from '../steps/EvaluationSteps';
+import useEvaluateFooter from './useEvaluateFooter';
+
+interface Props<T extends string> {
+  event: Event;
+  steps: EvaluateStep[];
+  currentStep: EvaluateStep;
+  fieldsToCheck: T[];
+  setCurrentStep: (step: EvaluateStep) => void;
+  submitForm: () => Promise<void>;
+}
+
+const EvaluateFooter = <T extends string>({ event, steps, currentStep, fieldsToCheck, setCurrentStep, submitForm }: Props<T>) => {
+  const { isFormSubmitting, onNextStep, onPrevStep, onStartEvaluate, onSubmit } = useEvaluateFooter(
+    event,
+    steps,
+    currentStep,
+    fieldsToCheck,
+    setCurrentStep,
+    submitForm
+  );
+
+  if (currentStep.id === 'ClaimCertificate') {
+    return <></>;
+  }
+
+  const eventDetailsFooter = () => {
+    return (
+      <Button
+        onClick={onStartEvaluate}
+        icon="ChevronRight"
+        iconPlacement="right"
+        className="py-6 sm:px-10 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
+      >
+        Evaluate
+      </Button>
+    );
+  };
+
+  const evaluationFooter = () => {
+    return (
+      <>
+        <Button onClick={onPrevStep} icon="ChevronLeft" className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange">
+          Back
+        </Button>
+        <Button
+          onClick={onNextStep}
+          icon="ChevronRight"
+          iconPlacement="right"
+          className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
+        >
+          Next
+        </Button>
+      </>
+    );
+  };
+
+  const submitFooter = () => {
+    return (
+      <>
+        <Button
+          onClick={onPrevStep}
+          disabled={isFormSubmitting}
+          icon="ChevronLeft"
+          className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
+        >
+          Back
+        </Button>
+        <Button
+          onClick={async () => onSubmit()}
+          loading={isFormSubmitting}
+          icon="ChevronRight"
+          iconPlacement="right"
+          className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
+        >
+          Submit
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <footer className="flex w-full justify-around my-6">
+      {currentStep.id === 'EventDetails' && eventDetailsFooter()}
+      {currentStep.id === 'Evaluation_1' && evaluationFooter()}
+      {currentStep.id === 'Evaluation_2' && submitFooter()}
+    </footer>
+  );
+};
+
+export default EvaluateFooter;
diff --git a/frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts b/frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts
new file mode 100644
index 00000000..92628162
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts
@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { useFormContext, useFormState } from 'react-hook-form';
+import { claimCertificate } from '@/api/evaluations';
+import { Event } from '@/model/events';
+import { isEmpty, scrollToView } from '@/utils/functions';
+import { useApi } from '@/hooks/useApi';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNotifyToast } from '@/hooks/useNotifyToast';
+import { DefaultEvaluateFormValues } from '@/hooks/usePyconEvaluationForm';
+import { EvaluateStep, STEP_CLAIM_CERTIFICATE } from '../steps/EvaluationSteps';
+
+const useEvaluateFooter = <T extends string>(
+  event: Event,
+  steps: EvaluateStep[],
+  currentStep: EvaluateStep,
+  fieldsToCheck: T[],
+  setCurrentStep: (step: EvaluateStep) => void,
+  submitForm: () => Promise<void>
+) => {
+  const [isValidatingEmail, setIsValidatingEmail] = useState(false);
+  const { errorToast } = useNotifyToast();
+  const api = useApi();
+  const context = useCurrentUser();
+  console.log(context);
+  const { eventId } = event;
+  const { trigger, getValues, setValue } = useFormContext<DefaultEvaluateFormValues>();
+  const { isSubmitting: isFormSubmitting } = useFormState();
+  const currentIndex = steps.indexOf(currentStep);
+
+  const onNextStep = async () => {
+    const moveToNextStep = () => {
+      if (currentIndex < steps.length - 1) {
+        setCurrentStep(steps[currentIndex + 1]);
+        scrollToView();
+      }
+    };
+    if (isEmpty(fieldsToCheck)) {
+      moveToNextStep();
+    } else {
+      const isValid = await trigger(fieldsToCheck);
+      if (isValid) {
+        moveToNextStep();
+        scrollToView();
+      }
+    }
+  };
+
+  const onPrevStep = () => {
+    if (currentIndex > 0) {
+      setCurrentStep(steps[currentIndex - 1]);
+    }
+  };
+
+  const onStartEvaluate = async () => {
+    const email = context?.user?.email || getValues('email');
+
+    if (!email) {
+      errorToast({
+        title: 'Authentication Required',
+        description: 'Please log in to continue.'
+      });
+      return;
+    }
+
+    try {
+      setIsValidatingEmail(true);
+      const response = await api.execute(claimCertificate(eventId!, email));
+
+      if (response.status === 200) {
+        setValue('certificate', response.data);
+
+        const isFirstClaim = response.data?.isFirstClaim;
+        if (!isFirstClaim) {
+          setCurrentStep(STEP_CLAIM_CERTIFICATE);
+          return;
+        }
+
+        onNextStep();
+      } else if (response.status === 404) {
+        errorToast({
+          title: 'Registration Not Found',
+          description: 'Your email was not found in the registration list for this event.'
+        });
+      } else {
+        errorToast({
+          title: 'Error',
+          description: 'Unable to verify your registration. Please try again.'
+        });
+      }
+    } catch (error) {
+      errorToast({
+        title: 'Error',
+        description: 'An error occurred. Please try again.'
+      });
+    } finally {
+      setIsValidatingEmail(false);
+    }
+  };
+
+  const onSubmit = async () => {
+    try {
+      await submitForm();
+
+      const email = context?.user?.email || getValues('email');
+
+      if (email) {
+        const response = await api.execute(claimCertificate(eventId!, email));
+        if (response.status === 200) {
+          setValue('certificate', response.data);
+        }
+      }
+
+      onNextStep();
+    } catch (error) {
+      console.error(error);
+      errorToast({
+        title: 'Submission Error',
+        description: 'There was an error submitting your evaluation. Please try again.'
+      });
+    }
+  };
+
+  return {
+    isValidatingEmail,
+    isFormSubmitting,
+    onNextStep,
+    onPrevStep,
+    onStartEvaluate,
+    onSubmit
+  };
+};
+
+export default useEvaluateFooter;
diff --git a/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionBuilder.tsx b/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionBuilder.tsx
new file mode 100644
index 00000000..e0c6d89a
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionBuilder.tsx
@@ -0,0 +1,27 @@
+import { FormError, FormItem, FormLabel } from '@/components/Form';
+import { QuestionConfigItem } from '@/model/pycon/evaluations';
+import QuestionTypeSwitch from './QuestionTypeSwitch';
+
+interface QuestionBuilderProps {
+  questions: QuestionConfigItem[];
+}
+
+const QuestionBuilder = ({ questions }: QuestionBuilderProps) => {
+  return (
+    <>
+      {questions.map((question, index) => (
+        <FormItem key={index} name={question.name}>
+          {({ field }) => (
+            <div className="flex flex-col gap-2">
+              <FormLabel className="mb-1 text-pycon-custard">{question.question} *</FormLabel>
+              {QuestionTypeSwitch(question, field)}
+              <FormError />
+            </div>
+          )}
+        </FormItem>
+      ))}
+    </>
+  );
+};
+
+export default QuestionBuilder;
diff --git a/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx b/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx
new file mode 100644
index 00000000..30b44c52
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx
@@ -0,0 +1,106 @@
+import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
+import Checkbox from '@/components/Checkbox';
+import Input from '@/components/Input';
+import { RadioGroup, RadioGroupItem } from '@/components/RadioGroup';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from '@/components/Select';
+import Slider from '@/components/Slider';
+import { Textarea } from '@/components/TextArea';
+import { QuestionConfigItem } from '@/model/pycon/evaluations';
+
+const QuestionTypeSwitch = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(
+  question: QuestionConfigItem,
+  field: ControllerRenderProps<FieldValues, TName>,
+  disabled: boolean = false
+) => {
+  switch (question.questionType) {
+    case 'text_short':
+      return <Input type="text" {...field} />;
+    case 'text_long':
+      return <Textarea {...field} variant="custard" />;
+    case 'multiple_choice_dropdown':
+      return (
+        <Select onValueChange={field.onChange} disabled={disabled}>
+          <SelectTrigger>
+            <SelectValue placeholder="Drop down Choices" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {question.options &&
+                Array.isArray(question.options) &&
+                question?.options.map((option, index) => (
+                  <SelectItem key={index} value={option}>
+                    {option}
+                  </SelectItem>
+                ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+    case 'multiple_choice':
+      return (
+        <RadioGroup className="space-y-1" onValueChange={field.onChange} {...field} disabled={disabled}>
+          {question.options &&
+            Array.isArray(question.options) &&
+            question?.options.map((option, index) => {
+              return (
+                <label key={index} htmlFor={option}>
+                  <RadioGroupItem value={option} id={option} />
+                  <span className="ml-1">{option}</span>
+                </label>
+              );
+            })}
+        </RadioGroup>
+      );
+    case 'multiple_answers':
+      return (
+        <div className="flex flex-col space-y-2">
+          {question.options &&
+            Array.isArray(question.options) &&
+            question?.options.map((option, index) => {
+              const fieldValue = field.value as unknown as string[];
+
+              return (
+                <label key={index} htmlFor={option}>
+                  <Checkbox
+                    id={option}
+                    value={option}
+                    checked={fieldValue.includes(option)}
+                    disabled={disabled}
+                    onCheckedChange={(checked) =>
+                      checked ? field.onChange([...fieldValue, option]) : field.onChange(fieldValue.filter((item) => item !== option))
+                    }
+                  />
+                  <span className="ml-1">{option}</span>
+                </label>
+              );
+            })}
+        </div>
+      );
+    case 'slider':
+      return (
+        <div className="w-full">
+          <Slider className="w-full mt-5" min={1} max={5} step={1} onValueChange={field.onChange} disabled={disabled} />
+          <div className="flex justify-between px-1 mt-5">
+            {[...Array(5)].map((_, index) => (
+              <span key={index}>{index + 1}</span>
+            ))}
+          </div>
+        </div>
+      );
+    case 'radio_buttons':
+      return (
+        <RadioGroup onValueChange={field.onChange} {...field} disabled={disabled}>
+          <div className="flex justify-between px-2 mb-1">
+            {[...Array(5)].map((_, index) => (
+              <div key={index} className="flex flex-col items-center gap-2">
+                <span key={index}>{index + 1}</span>
+                <RadioGroupItem value={String(index + 1)} id={String(index + 1)} pyconStyles={true} />
+              </div>
+            ))}
+          </div>
+        </RadioGroup>
+      );
+  }
+};
+
+export default QuestionTypeSwitch;
diff --git a/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts
new file mode 100644
index 00000000..84ab7ac5
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts
@@ -0,0 +1,67 @@
+import { z } from 'zod';
+import { QuestionConfigItem } from '@/model/pycon/evaluations';
+
+export const questionSchemaBuilder = (questions: QuestionConfigItem[]) => {
+  const schema = questions.reduce(
+    (acc, question) => {
+      switch (question.questionType) {
+        case 'multiple_answers':
+          acc[question.name] = z
+            .array(z.string())
+
+            .min(1, { message: 'Please select at least one option' });
+          break;
+
+        case 'slider':
+          acc[question.name] = z.union([
+            z.number().refine((val) => val >= 1 && val <= 5, {
+              message: 'Please select a rating from 1 to 5'
+            }),
+            z.array(z.number()).refine((arr) => arr.length > 0 && arr[0] >= 1 && arr[0] <= 5, {
+              message: 'Please select a rating from 1 to 5'
+            })
+          ]);
+          break;
+
+        case 'radio_buttons':
+          acc[question.name] = z.union([
+            z.string().refine(
+              (val) => {
+                const num = parseInt(val);
+                return !isNaN(num) && num >= 1 && num <= 5;
+              },
+              {
+                message: 'Please select a rating from 1 to 5'
+              }
+            ),
+            z.number().refine((val) => val >= 1 && val <= 5, {
+              message: 'Please select a rating from 1 to 5'
+            })
+          ]);
+          break;
+
+        case 'text_short':
+          acc[question.name] = z.string().min(1, { message: 'This field is required' }).max(200, { message: 'Response must be 200 characters or less' });
+          break;
+
+        case 'text_long':
+          acc[question.name] = z.string().min(1, { message: 'This field is required' }).max(1000, { message: 'Response must be 1000 characters or less' });
+          break;
+
+        case 'multiple_choice_dropdown':
+        case 'multiple_choice':
+          acc[question.name] = z.string().min(1, { message: 'Please select an option' });
+          break;
+
+        default:
+          acc[question.name] = z.any().refine((val) => val !== undefined && val !== null && val !== '', {
+            message: 'This field is required'
+          });
+      }
+      return acc;
+    },
+    {} as Record<string, z.ZodTypeAny>
+  );
+
+  return z.object(schema);
+};
diff --git a/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts
new file mode 100644
index 00000000..6484b49e
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts
@@ -0,0 +1,173 @@
+import { QuestionConfigItem } from '@/model/pycon/evaluations';
+
+export const EVALUATION_QUESTIONS_1: QuestionConfigItem[] = [
+  {
+    name: 'how_would_you_rate_pycon_davao_overall',
+    questionType: 'slider',
+    question: 'How would you rate PyCon Davao overall? (1–5)',
+    options: [],
+
+    required: true
+  },
+  {
+    name: 'what_was_the_highlight_of_the_event_for_you',
+    questionType: 'text_long',
+    question: 'What was the highlight of the event for you?',
+
+    options: [],
+    required: true
+  },
+  {
+    name: 'is_there_anything_specific_you_would_like_to_commend_about_the_event',
+    questionType: 'text_long',
+    question: 'Is there anything specific you would like to commend about the event?',
+    options: [],
+    required: true
+  },
+  {
+    name: 'how_satisfied_were_you_with_the_content_and_presentations',
+    questionType: 'slider',
+    question: 'How satisfied were you with the content and presentations? (1–5)',
+    options: [],
+    required: true
+  },
+
+  {
+    name: 'which_sessions_or_topics_did_you_find_most_valuable',
+    questionType: 'text_long',
+    question: 'Which sessions or topics did you find most valuable?',
+    options: [],
+    required: true
+  },
+  {
+    name: 'were_there_any_topics_or_sessions_you_felt_were_missing',
+    questionType: 'text_long',
+    question: 'Were there any topics or sessions you felt were missing?',
+    options: [],
+    required: true
+  },
+  {
+    name: 'have_you_attended_python_events_before_if_so_what_kind_of_community_support_did_you_find_helpful_in_previous_events',
+    questionType: 'text_long',
+    question: 'Have you attended Python events before? If so, what kind of community support did you find helpful in previous events?',
+    options: [],
+    required: true
+  },
+
+  {
+    name: 'how_likely_are_you_to_recommend_this_event_to_other_python_developers_or_enthusiasts_based_on_the_community_support_provided',
+    questionType: 'slider',
+    question: 'How likely are you to recommend this event to other Python developers or enthusiasts based on the community support provided? (1–5)',
+    options: [],
+    required: true
+  }
+];
+
+export const EVALUATION_QUESTIONS_2: QuestionConfigItem[] = [
+  {
+    name: 'how_would_you_rate_event_organization_and_logistics',
+    questionType: 'slider',
+    question: 'How would you rate the event organization and logistics? (1–5)',
+    options: [],
+
+    required: true
+  },
+  {
+    name: 'were_the_event_schedule_and_timing_convenient_for_you',
+    questionType: 'slider',
+    question: 'Were the event schedule and timing convenient for you? (1–5)',
+
+    options: [],
+    required: true
+  },
+  {
+    name: 'were_the_venue_facilities_adequate',
+    questionType: 'radio_buttons',
+
+    question: 'Were the venue facilities adequate?',
+    options: ['Yes', 'No'],
+    required: true
+  },
+  {
+    name: 'did_you_encounter_any_problems_with_the_organization_and_logistics',
+    questionType: 'text_long',
+    question: 'Did you encounter any problems with the organization and logistics?',
+    options: [],
+    required: true
+  },
+  {
+    name: 'did_you_find_opportunities_for_networking_valuable',
+    questionType: 'slider',
+    question: 'Did you find opportunities for networking valuable? (1–5)',
+    options: [],
+    required: true
+  },
+  {
+    name: 'how_would_you_rate_the_networking_opportunities_provided',
+    questionType: 'slider',
+    question: 'How would you rate the networking opportunities provided? (1–5)',
+    options: [],
+    required: true
+  },
+  {
+    name: 'what_could_have_been_improved_related_to_the_networking_and_interaction_aspects_of_the_event',
+    questionType: 'text_long',
+    question: 'What could have been improved related to the networking and interaction aspects of the event?',
+    options: [],
+    required: true
+  },
+  {
+    name: 'what_suggestions_do_you_have_for_improving_future_pycon_events',
+    questionType: 'text_long',
+    question: 'What suggestions do you have for improving future PyCon events?',
+    options: [],
+    required: true
+  },
+  {
+    name: 'is_there_anything_else_you_would_like_to_share_about_your_experience_at_the_event',
+    questionType: 'text_long',
+    question: 'Is there anything else you would like to share about your experience at the event?',
+    options: [],
+    required: true
+  },
+  {
+    name: 'how_likely_are_you_to_attend_future_pycon_davao_events',
+    questionType: 'slider',
+    question: 'How likely are you to attend future PyCon Davao events? (1–5)',
+    options: [],
+    required: true
+  }
+];
+
+export const QUESTIONS = new Map([
+  ['how_would_you_rate_pycon_davao_overall', 'How would you rate PyCon Davao overall? (1–5)'],
+  ['what_was_the_highlight_of_the_event_for_you', 'What was the highlight of the event for you?'],
+  ['is_there_anything_specific_you_would_like_to_commend_about_the_event', 'Is there anything specific you would like to commend about the event?'],
+  ['how_satisfied_were_you_with_the_content_and_presentations', 'How satisfied were you with the content and presentations? (1–5)'],
+  ['which_sessions_or_topics_did_you_find_most_valuable', 'Which sessions or topics did you find most valuable?'],
+  ['were_there_any_topics_or_sessions_you_felt_were_missing', 'Were there any topics or sessions you felt were missing?'],
+  [
+    'have_you_attended_python_events_before_if_so_what_kind_of_community_support_did_you_find_helpful_in_previous_events',
+    'Have you attended Python events before? If so, what kind of community support did you find helpful in previous events?'
+  ],
+  [
+    'how_likely_are_you_to_recommend_this_event_to_other_python_developers_or_enthusiasts_based_on_the_community_support_provided',
+    'How likely are you to recommend this event to other Python developers or enthusiasts based on the community support provided? (1–5)'
+  ],
+  ['how_would_you_rate_the_event_organization_and_logistics', 'How would you rate the event organization and logistics? (1–5)'],
+  ['were_the_event_schedule_and_timing_convenient_for_you', 'Were the event schedule and timing convenient for you? (1–5)'],
+  ['were_the_venue_facilities_adequate', 'Were the venue facilities adequate?'],
+  ['did_you_encounter_any_problems_with_the_organization_and_logistics', 'Did you encounter any problems with the organization and logistics?'],
+  ['did_you_find_opportunities_for_networking_valuable', 'Did you find opportunities for networking valuable? (1–5)'],
+  ['how_would_you_rate_the_networking_opportunities_provided', 'How would you rate the networking opportunities provided? (1–5)'],
+  [
+    'what_could_have_been_improved_related_to_the_networking_and_interaction_aspects_of_the_event',
+    'What could have been improved related to the networking and interaction aspects of the event?'
+  ],
+  ['what_suggestions_do_you_have_for_improving_future_pycon_events', 'What suggestions do you have for improving future PyCon events?'],
+  [
+    'is_there_anything_else_you_would_like_to_share_about_your_experience_at_the_event',
+    'Is there anything else you would like to share about your experience at the event?'
+  ],
+  ['how_likely_are_you_to_attend_future_pycon_davao_events', 'How likely are you to attend future PyCon Davao events? (1–5)']
+]);
diff --git a/frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx b/frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx
new file mode 100644
index 00000000..c3eec31f
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx
@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import Button from '@/components/Button';
+import Skeleton from '@/components/Skeleton';
+import { reloadPage } from '@/utils/functions';
+// import shareToLinkedIn from './shareToLinkedIn';
+import { useClaimCertificate } from './useClaimCertificate';
+
+interface Props {
+  eventId: string;
+}
+
+const ClaimCertificate: FC<Props> = ({ eventId }) => {
+  const { certificateImgDataURL, isLoading, onDownloadImg, onDownloadPdf } = useClaimCertificate(eventId);
+
+  // const onShareToLinkedIn = () => {
+  //   const LinkedInParams = {
+  //     certificateName: 'testCert',
+  //     organizationId: '96606526',
+  //     certificateIssueYear: 2023,
+  //     certificateIssueMonth: 10,
+  //     certificateURL: 'https://i.pinimg.com/originals/1d/bd/a3/1dbda3a29df5da215a639c8d35070c9c.jpg',
+  //     certificateId: 'test'
+  //   };
+  //   shareToLinkedIn(LinkedInParams);
+  // };
+
+  console.log(certificateImgDataURL, isLoading);
+
+  if (isLoading) {
+    return <Skeleton className="rounded-2xl h-[330px] w-full" />;
+  }
+
+  if (!certificateImgDataURL) {
+    <p className="font-subjectivity font-bold text-transparent gradient-text bg-linear-to-br from-secondary-pink-400 to-primary-500">
+      Please refresh the page
+    </p>;
+  }
+
+  return (
+    <>
+      <h3>Here's your Certificate!</h3>
+      {certificateImgDataURL && (
+        <img src={certificateImgDataURL} className="animate-[fade-in_3s_ease-in-out] rounded-2xl object-center object-cover w-full h-full" />
+      )}
+      <div className="w-full space-y-10">
+        <div className="flex flex-col space-y-4">
+          <Button onClick={onDownloadImg} icon="Download" variant="secondaryGradient" className="py-3 px-6">
+            Download Image
+          </Button>
+          <Button onClick={onDownloadPdf} icon="Download" variant="primaryGradient" className="py-3 px-6">
+            Download PDF
+          </Button>
+        </div>
+
+        {/* <Button onClick={onShareToLinkedIn} icon="Share" variant="primaryGradient" className="py-3 px-6">
+          Share to LinkedIn
+        </Button> */}
+
+        <Button onClick={reloadPage} icon="ChevronRight" iconPlacement="right" className="w-full py-3 px-6">
+          Evaluate with another user
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default ClaimCertificate;
diff --git a/frontend/src/pages/client/pycon/evaluate/steps/EvaluationSteps.ts b/frontend/src/pages/client/pycon/evaluate/steps/EvaluationSteps.ts
new file mode 100644
index 00000000..339409d7
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/steps/EvaluationSteps.ts
@@ -0,0 +1,27 @@
+import { Step } from '@/components/Stepper';
+
+export type EvaluateStepId = 'EventDetails' | 'Evaluation_1' | 'Evaluation_2' | 'ClaimCertificate';
+
+export interface EvaluateStep extends Step {
+  id: EvaluateStepId;
+}
+
+export const STEP_EVENT_DETAILS: EvaluateStep = {
+  id: 'EventDetails'
+};
+
+export const STEP_EVALUATION_1: EvaluateStep = {
+  id: 'Evaluation_1',
+  title: 'Evaluation'
+};
+
+export const STEP_EVALUATION_2: EvaluateStep = {
+  id: 'Evaluation_2',
+  title: 'Submit'
+};
+
+export const STEP_CLAIM_CERTIFICATE: EvaluateStep = {
+  id: 'ClaimCertificate'
+};
+
+export const EvaluateSteps: EvaluateStep[] = [STEP_EVENT_DETAILS, STEP_EVALUATION_1, STEP_EVALUATION_2, STEP_CLAIM_CERTIFICATE];
diff --git a/frontend/src/pages/client/pycon/evaluate/steps/EventInformation.tsx b/frontend/src/pages/client/pycon/evaluate/steps/EventInformation.tsx
new file mode 100644
index 00000000..03e6af98
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/steps/EventInformation.tsx
@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import moment from 'moment';
+import { FormProvider } from 'react-hook-form';
+import { FormDescription, FormItem, FormLabel, FormError } from '@/components/Form';
+import Icon from '@/components/Icon';
+import Input from '@/components/Input';
+import Separator from '@/components/Separator';
+import { Event } from '@/model/events';
+
+interface Props {
+  event: Event;
+  nextStep: () => void;
+  eventId: string | undefined;
+  claimCertificateForm: any;
+}
+
+const EventInformation: FC<Props> = ({
+  event,
+  // nextStep,
+  // eventId,
+  claimCertificateForm
+}) => {
+  const isSameDayEvent = moment(event.startDate).isSame(event.endDate, 'day');
+  const getDate = () => {
+    if (isSameDayEvent) {
+      return `${moment(event.startDate).format('MMMM Do YYYY, h:mm A')} - ${moment(event.endDate).format('LT')}`;
+    }
+    return `${moment(event.startDate).format('MMMM Do YYYY')} - ${moment(event.endDate).format('MMMM Do YYYY')}`;
+  };
+
+  return (
+    <div className="w-full">
+      <h1 className="text-lg">{event.name}</h1>
+      <div className="w-full mt-3.5 space-y-1.5 items-start">
+        <div className="flex items-center space-x-2">
+          <Icon name="Clock" />
+          <p className="text-sm">{getDate()}</p>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Icon name="MapPin" />
+          <p className="text-sm">{event.venue}</p>
+        </div>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex flex-col items-center w-full">
+        <p className="font-raleway font-semibold text-lg leading-5 tracking-tight mb-6 text-center">Claim your certificate by evaluating the event</p>
+        <FormProvider {...claimCertificateForm}>
+          <FormItem name="email">
+            {({ field }) => (
+              <div className="flex flex-col items-start space-y-2 w-full">
+                <FormLabel className="font-raleway text-neutral-50 font-medium leading-5 tracking-tight">Enter your Email</FormLabel>
+                <Input type="email" placeholder="Email" className="bg-pycon-custard-light" {...field} />
+                <FormDescription>Please enter the email address you used when registering for the event</FormDescription>
+                <FormError />
+              </div>
+            )}
+          </FormItem>
+        </FormProvider>
+      </div>
+    </div>
+  );
+};
+
+export default EventInformation;
diff --git a/frontend/src/pages/client/pycon/evaluate/steps/shareToLinkedIn.ts b/frontend/src/pages/client/pycon/evaluate/steps/shareToLinkedIn.ts
new file mode 100644
index 00000000..47ff1f23
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/steps/shareToLinkedIn.ts
@@ -0,0 +1,40 @@
+interface LinkedInDetailsProps {
+  certificateName: string | undefined;
+  organizationId: string | undefined;
+  certificateIssueYear: number | undefined;
+  certificateIssueMonth: number | undefined;
+  certificateURL: string | undefined;
+  certificateId: string | undefined;
+}
+
+const fillLinkedInDetails = ({
+  certificateName,
+  organizationId,
+  certificateIssueYear,
+  certificateIssueMonth,
+  certificateURL,
+  certificateId
+}: LinkedInDetailsProps) => {
+  const certId = certificateId || '';
+  const certUrl = certificateURL || '';
+  const isFromA2p = true;
+  const issueMonth = certificateIssueMonth || 0;
+  const issueYear = certificateIssueYear || 0;
+  const name = certificateName || '';
+
+  const linkedInURL = `https://www.linkedin.com/profile/add?certId=${certId}&certUrl=${encodeURIComponent(
+    certUrl
+  )}&isFromA2p=${isFromA2p}&issueMonth=${issueMonth}&issueYear=${issueYear}&name=${encodeURIComponent(name)}&organizationId=${organizationId}`;
+
+  return linkedInURL;
+};
+
+const shareToLinkedIn = (params: LinkedInDetailsProps) => {
+  const LinkedInDetails = fillLinkedInDetails(params);
+  const link = document.createElement('a');
+  link.href = LinkedInDetails;
+  link.target = '_blank';
+  link.click();
+};
+
+export default shareToLinkedIn;
diff --git a/frontend/src/pages/client/pycon/evaluate/steps/useClaimCertificate.ts b/frontend/src/pages/client/pycon/evaluate/steps/useClaimCertificate.ts
new file mode 100644
index 00000000..896c668d
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/steps/useClaimCertificate.ts
@@ -0,0 +1,35 @@
+import { useFormContext } from 'react-hook-form';
+import { decodeObjectKeys, downloadFile } from '@/utils/functions';
+import { useFileUrl } from '@/hooks/useFileUrl';
+import { DefaultEvaluateFormValues } from '@/hooks/usePyconEvaluationForm';
+
+export const useClaimCertificate = (eventId: string) => {
+  const { getValues } = useFormContext<DefaultEvaluateFormValues>();
+  const certificate = getValues('certificate');
+
+  const { certificateTemplateKey, certificatePDFTemplateKey } = certificate;
+
+  const { fileUrl: certificateImgDataURL, isPending: isPendingImg } = useFileUrl(eventId, certificateTemplateKey);
+  const { fileUrl: certificatePdfDataURL, isPending: isPendingPdf } = useFileUrl(eventId, certificatePDFTemplateKey);
+
+  const isLoading = isPendingImg || isPendingPdf;
+
+  const onDownloadImg = () => {
+    if (certificateImgDataURL && certificateTemplateKey) {
+      downloadFile(certificateImgDataURL, decodeObjectKeys(certificateTemplateKey));
+    }
+  };
+
+  const onDownloadPdf = () => {
+    if (certificatePdfDataURL && certificatePDFTemplateKey) {
+      downloadFile(certificatePdfDataURL, decodeObjectKeys(certificatePDFTemplateKey));
+    }
+  };
+
+  return {
+    certificateImgDataURL,
+    isLoading,
+    onDownloadImg,
+    onDownloadPdf
+  };
+};
diff --git a/frontend/src/pages/client/pycon/evaluate/useEvaluatePage.ts b/frontend/src/pages/client/pycon/evaluate/useEvaluatePage.ts
new file mode 100644
index 00000000..2f3379da
--- /dev/null
+++ b/frontend/src/pages/client/pycon/evaluate/useEvaluatePage.ts
@@ -0,0 +1,18 @@
+import { getEvent } from '@/api/events';
+import { useApiQuery } from '@/hooks/useApi';
+import { useMetaData } from '@/hooks/useMetaData';
+
+export const useEvaluatePage = (eventId: string) => {
+  const { data: response, isPending } = useApiQuery(getEvent(eventId));
+  const setMetaData = useMetaData();
+
+  setMetaData({
+    title: response?.data?.name,
+    iconUrl: response?.data?.logoUrl
+  });
+
+  return {
+    response,
+    isPending
+  };
+};
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index 4a766d45..e53504d5 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -1,9 +1,9 @@
 import { createBrowserRouter } from 'react-router-dom';
 import ErrorPage from '@/components/ErrorPage';
-import EvaluatePage from '@/pages/client/evaluate/EvaluatePage';
 import LoginPage from '@/pages/client/login/LoginPage';
 import PreRegisterPage from '@/pages/client/preregister/PreRegisterPage';
 import PyconClientPage from '@/pages/client/pycon/PyconClientPage';
+import EvaluatePage from '@/pages/client/pycon/evaluate/PyconEvaluatePage';
 import RegisterPage from '@/pages/client/pycon/register/RegisterPage';
 import UserInfoPage from '@/pages/client/pycon/register/UserInfoPage';
 import Callback from './Callback';

From 350a2e590702a12d9d9989591820b74782607a99 Mon Sep 17 00:00:00 2001
From: seangaaab <seangabbayron@gmail.com>
Date: Mon, 13 Oct 2025 10:54:22 +0800
Subject: [PATCH 2/2] feat: refactor some parts

---
 frontend/src/components/Slider.tsx            | 12 ++-
 frontend/src/model/pycon/evaluations.ts       | 53 ++++++-------
 .../pages/client/pycon/evaluate/Evaluate.tsx  | 74 ++++++++++---------
 ...PyconEvaluatePage.tsx => EvaluatePage.tsx} |  0
 .../pycon/evaluate/footer/EvaluateFooter.tsx  | 36 +++++----
 .../evaluate/footer/useEvaluateFooter.ts      |  9 ---
 .../questionBuilder/QuestionTypeSwitch.tsx    | 12 ++-
 .../questionBuilder/questionSchemaBuilder.ts  |  5 +-
 .../questionBuilder/questionsConfig.ts        |  8 +-
 .../pycon/evaluate/steps/ClaimCertificate.tsx | 12 +--
 .../client/pycon/register/steps/Stepper.tsx   |  7 +-
 frontend/src/routes/routes.tsx                |  2 +-
 12 files changed, 121 insertions(+), 109 deletions(-)
 rename frontend/src/pages/client/pycon/evaluate/{PyconEvaluatePage.tsx => EvaluatePage.tsx} (100%)

diff --git a/frontend/src/components/Slider.tsx b/frontend/src/components/Slider.tsx
index 07bdd5d1..1bd826f3 100644
--- a/frontend/src/components/Slider.tsx
+++ b/frontend/src/components/Slider.tsx
@@ -16,10 +16,14 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, R
       <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full dark:bg-background-100 bg-pycon-custard-light">
         <SliderPrimitive.Range className="absolute h-full bg-pycon-orange" />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb
-        className="block h-8 w-8 bg-cover bg-center transition-transform hover:scale-110 focus-visible:outline-none disabled:opacity-50"
-        style={{ backgroundImage: `url(${durian})` }}
-      />
+      <SliderPrimitive.Thumb className="block relative size-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
+        <div
+          className="absolute -inset-x-1 -inset-y-1 size-6 bg-cover bg-no-repeat bg-center transition-transform hover:scale-110 focus-visible:outline-none disabled:opacity-50"
+          style={{
+            backgroundImage: `url(${durian})`
+          }}
+        />
+      </SliderPrimitive.Thumb>
     </SliderPrimitive.Root>
   )
 );
diff --git a/frontend/src/model/pycon/evaluations.ts b/frontend/src/model/pycon/evaluations.ts
index 9125b33e..88437aca 100644
--- a/frontend/src/model/pycon/evaluations.ts
+++ b/frontend/src/model/pycon/evaluations.ts
@@ -40,6 +40,34 @@ export interface Evaluation {
   evaluationList: EvaluationResponse[];
 }
 
+const sliderQuestions = [
+  'how_would_you_rate_pycon_davao_overall',
+  'how_satisfied_were_you_with_the_content_and_presentations',
+  'how_likely_are_you_to_recommend_this_event_to_other_python_developers_or_enthusiasts_based_on_the_community_support_provided',
+  'how_would_you_rate_event_organization_and_logistics',
+  'were_the_event_schedule_and_timing_convenient_for_you',
+  'did_you_find_opportunities_for_networking_valuable',
+  'how_would_you_rate_the_networking_opportunities_provided',
+  'how_likely_are_you_to_attend_future_pycon_davao_events',
+  'were_the_venue_facilities_adequate'
+];
+
+const textLongQuestions = [
+  'what_was_the_highlight_of_the_event_for_you',
+  'is_there_anything_specific_you_would_like_to_commend_about_the_event',
+  'which_sessions_or_topics_did_you_find_most_valuable',
+  'were_there_any_topics_or_sessions_you_felt_were_missing',
+  'have_you_attended_python_events_before_if_so_what_kind_of_community_support_did_you_find_helpful_in_previous_events',
+  'did_you_encounter_any_problems_with_organization_and_logistics',
+  'what_could_have_been_improved_related_to_the_networking_and_interaction_aspects_of_the_event',
+  'what_suggestions_do_you_have_for_improving_future_pycon_events',
+  'is_there_anything_else_you_would_like_to_share_about_your_experience_at_the_event'
+];
+
+const radioButtonQuestions: string[] = [];
+
+export const PYCON_EVALUATION_QUESTIONS = [...sliderQuestions, ...textLongQuestions, ...radioButtonQuestions];
+
 export const mapFormValuesToEvaluateCreate = (data: any) => {
   const values = { ...data };
   delete values.email;
@@ -50,31 +78,6 @@ export const mapFormValuesToEvaluateCreate = (data: any) => {
 export const convertToEvaluationList = (data: any) => {
   // Question type mappings
 
-  const sliderQuestions = [
-    'how_would_you_rate_pycon_davao_overall',
-    'how_satisfied_were_you_with_the_content_and_presentations',
-    'how_likely_are_you_to_recommend_this_event_to_other_python_developers_or_enthusiasts_based_on_the_community_support_provided',
-    'how_would_you_rate_event_organization_and_logistics',
-    'were_the_event_schedule_and_timing_convenient_for_you',
-    'did_you_find_opportunities_for_networking_valuable',
-    'how_would_you_rate_the_networking_opportunities_provided',
-    'how_likely_are_you_to_attend_future_pycon_davao_events'
-  ];
-
-  const textLongQuestions = [
-    'what_was_the_highlight_of_the_event_for_you',
-    'is_there_anything_specific_you_would_like_to_commend_about_the_event',
-    'which_sessions_or_topics_did_you_find_most_valuable',
-    'were_there_any_topics_or_sessions_you_felt_were_missing',
-    'have_you_attended_python_events_before_if_so_what_kind_of_community_support_did_you_find_helpful_in_previous_events',
-    'did_you_encounter_any_problems_with_organization_and_logistics',
-    'what_could_have_been_improved_related_to_the_networking_and_interaction_aspects_of_the_event',
-    'what_suggestions_do_you_have_for_improving_future_pycon_events',
-    'is_there_anything_else_you_would_like_to_share_about_your_experience_at_the_event'
-  ];
-
-  const radioButtonQuestions = ['were_the_venue_facilities_adequate'];
-
   return Object.keys(data).map((key) => {
     const response: Omit<EvaluationResponse, 'eventId' | 'createDate' | 'updateDate'> = {
       answer: null,
diff --git a/frontend/src/pages/client/pycon/evaluate/Evaluate.tsx b/frontend/src/pages/client/pycon/evaluate/Evaluate.tsx
index a301f265..07ae1634 100644
--- a/frontend/src/pages/client/pycon/evaluate/Evaluate.tsx
+++ b/frontend/src/pages/client/pycon/evaluate/Evaluate.tsx
@@ -1,8 +1,6 @@
 import { FC, useState } from 'react';
 import { FormProvider } from 'react-hook-form';
 import ErrorPage from '@/components/ErrorPage';
-import { FormDescription, FormError, FormItem, FormItemContainer, FormLabel } from '@/components/Form';
-import Input from '@/components/Input';
 import Separator from '@/components/Separator';
 import { cn } from '@/utils/classes';
 import { useActiveBreakpoints } from '@/hooks/useActiveBreakpoints';
@@ -38,45 +36,51 @@ const Evaluate: FC<Props> = ({ eventId }) => {
   const showStepper = currentStep.id !== 'EventDetails' && currentStep.id !== 'ClaimCertificate';
 
   return (
-    <section className="flex flex-col items-center px-4">
-      <div className="w-full max-w-6xl space-y-6 flex flex-col items-center">
+    <section
+      className={cn(
+        'flex flex-col grow items-center px-4 h-full w-full text-pycon-custard font-nunito max-w-6xl mx-auto',
+        currentStep.id === 'ClaimCertificate' && 'grow-0'
+      )}
+    >
+      <div className="w-full h-full flex flex-col space-y-4 grow">
+        {currentStep.id !== 'EventDetails' && currentStep.id !== 'ClaimCertificate' && <h1 className="text-xl">Evaluation</h1>}
+
         <FormProvider {...form}>
-          <div className="flex flex-col md:flex-row items-start gap-5 lg:gap-15 w-full lg:mt-10">
+          <div className="flex flex-col md:flex-row w-full h-full grow">
             {showStepper && (
-              <aside className="w-full md:w-1/4 md:min-w-[240px] lg:h-[50vh]">
-                {showStepper && (
-                  <div className={cn('my-8', shouldBeVertical && 'h-[700px]')}>
-                    <Stepper
-                      orientation={shouldBeVertical ? 'vertical' : 'horizontal'}
-                      steps={STEPS}
-                      currentStep={currentStep}
-                      stepsToExclude={[STEP_CLAIM_CERTIFICATE]}
-                    />
-                  </div>
-                )}
-              </aside>
+              <div className={cn('my-8', shouldBeVertical && 'h-[700px]')}>
+                <Stepper
+                  orientation={shouldBeVertical ? 'vertical' : 'horizontal'}
+                  steps={STEPS}
+                  currentStep={currentStep}
+                  stepsToExclude={[STEP_CLAIM_CERTIFICATE]}
+                  hideTitle
+                />
+              </div>
             )}
 
-            <main className="flex-1">
-              {currentStep.id !== 'EventDetails' && currentStep.title && <h1 className="text-xl text-center md:text-left mb-4">{currentStep.title}</h1>}
-              <div className="space-y-4">
-                {currentStep.id === 'EventDetails' && <EventDetails event={eventInfo} />}
-                {currentStep.id === 'Evaluation_1' && <QuestionBuilder questions={EVALUATION_QUESTIONS_1} />}
-                {currentStep.id === 'Evaluation_2' && <QuestionBuilder questions={EVALUATION_QUESTIONS_2} />}
-              </div>
+            <div
+              className={cn(
+                'space-y-4 grow',
+                currentStep.id !== 'EventDetails' && currentStep.id !== 'ClaimCertificate' && shouldBeVertical && 'ms-[20vw] p-8'
+              )}
+            >
+              {currentStep.id === 'EventDetails' && <EventDetails event={eventInfo} />}
+              {currentStep.id === 'Evaluation_1' && <QuestionBuilder questions={EVALUATION_QUESTIONS_1} />}
+              {currentStep.id === 'Evaluation_2' && <QuestionBuilder questions={EVALUATION_QUESTIONS_2} />}
+            </div>
+          </div>
 
-              {(currentStep.id === 'Evaluation_1' || currentStep.id === 'Evaluation_2') && <Separator className="my-4" />}
+          {currentStep.id !== 'EventDetails' && currentStep.id !== 'ClaimCertificate' && <Separator className="my-4 bg-pycon-custard-light" />}
 
-              <EvaluateFooter
-                event={eventInfo}
-                steps={STEPS}
-                currentStep={currentStep}
-                fieldsToCheck={fieldsToCheck}
-                setCurrentStep={setCurrentStep}
-                submitForm={submit}
-              />
-            </main>
-          </div>
+          <EvaluateFooter
+            event={eventInfo}
+            steps={STEPS}
+            currentStep={currentStep}
+            fieldsToCheck={fieldsToCheck}
+            setCurrentStep={setCurrentStep}
+            submitForm={submit}
+          />
 
           {currentStep.id === 'ClaimCertificate' && <ClaimCertificate eventId={eventId!} />}
         </FormProvider>
diff --git a/frontend/src/pages/client/pycon/evaluate/PyconEvaluatePage.tsx b/frontend/src/pages/client/pycon/evaluate/EvaluatePage.tsx
similarity index 100%
rename from frontend/src/pages/client/pycon/evaluate/PyconEvaluatePage.tsx
rename to frontend/src/pages/client/pycon/evaluate/EvaluatePage.tsx
diff --git a/frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx b/frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx
index 012390a4..6b412b2a 100644
--- a/frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx
+++ b/frontend/src/pages/client/pycon/evaluate/footer/EvaluateFooter.tsx
@@ -1,5 +1,6 @@
 import Button from '@/components/Button';
 import { Event } from '@/model/events';
+import { EventFooterPortal } from '../../register/footer/EventFooterPortal';
 import { EvaluateStep } from '../steps/EvaluationSteps';
 import useEvaluateFooter from './useEvaluateFooter';
 
@@ -28,28 +29,37 @@ const EvaluateFooter = <T extends string>({ event, steps, currentStep, fieldsToC
 
   const eventDetailsFooter = () => {
     return (
-      <Button
-        onClick={onStartEvaluate}
-        icon="ChevronRight"
-        iconPlacement="right"
-        className="py-6 sm:px-10 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
-      >
-        Evaluate
-      </Button>
+      <EventFooterPortal>
+        <Button
+          onClick={onStartEvaluate}
+          icon="ChevronRight"
+          iconPlacement="right"
+          iconClassname="stroke-pycon-violet!"
+          className="cursor-pointer gap-x-2 bg-pycon-custard-light text-pycon-violet! rounded-full hover:bg-pycon-custard py-6 sm:px-10 my-8"
+        >
+          Evaluate
+        </Button>
+      </EventFooterPortal>
     );
   };
 
   const evaluationFooter = () => {
     return (
       <>
-        <Button onClick={onPrevStep} icon="ChevronLeft" className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange">
+        <Button
+          onClick={onPrevStep}
+          icon="ChevronLeft"
+          strokeWidth={3}
+          className="bg-transparent border border-pycon-custard-light text-pycon-custard-light font-medium rounded-full py-6 sm:px-6 hover:bg-pycon-custard-light cursor-pointer hover:text-pycon-violet"
+        >
           Back
         </Button>
         <Button
           onClick={onNextStep}
           icon="ChevronRight"
+          strokeWidth={3}
           iconPlacement="right"
-          className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
+          className="bg-pycon-custard-light hover:bg-pycon-custard cursor-pointer  text-pycon-violet rounded-full py-6 sm:px-6"
         >
           Next
         </Button>
@@ -62,9 +72,9 @@ const EvaluateFooter = <T extends string>({ event, steps, currentStep, fieldsToC
       <>
         <Button
           onClick={onPrevStep}
-          disabled={isFormSubmitting}
           icon="ChevronLeft"
-          className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
+          strokeWidth={3}
+          className="bg-transparent border border-pycon-custard-light text-pycon-custard-light font-medium rounded-full py-6 sm:px-6 hover:bg-pycon-custard-light cursor-pointer hover:text-pycon-violet"
         >
           Back
         </Button>
@@ -73,7 +83,7 @@ const EvaluateFooter = <T extends string>({ event, steps, currentStep, fieldsToC
           loading={isFormSubmitting}
           icon="ChevronRight"
           iconPlacement="right"
-          className="py-6 sm:px-6 bg-pycon-orange hover:bg-pycon-custard cursor-pointer hover:text-pycon-orange"
+          className="bg-pycon-custard-light hover:bg-pycon-custard cursor-pointer  text-pycon-violet rounded-full py-6 sm:px-6"
         >
           Submit
         </Button>
diff --git a/frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts b/frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts
index 92628162..13f529bb 100644
--- a/frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts
+++ b/frontend/src/pages/client/pycon/evaluate/footer/useEvaluateFooter.ts
@@ -21,7 +21,6 @@ const useEvaluateFooter = <T extends string>(
   const { errorToast } = useNotifyToast();
   const api = useApi();
   const context = useCurrentUser();
-  console.log(context);
   const { eventId } = event;
   const { trigger, getValues, setValue } = useFormContext<DefaultEvaluateFormValues>();
   const { isSubmitting: isFormSubmitting } = useFormState();
@@ -54,14 +53,6 @@ const useEvaluateFooter = <T extends string>(
   const onStartEvaluate = async () => {
     const email = context?.user?.email || getValues('email');
 
-    if (!email) {
-      errorToast({
-        title: 'Authentication Required',
-        description: 'Please log in to continue.'
-      });
-      return;
-    }
-
     try {
       setIsValidatingEmail(true);
       const response = await api.execute(claimCertificate(eventId!, email));
diff --git a/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx b/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx
index 30b44c52..6279a642 100644
--- a/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx
+++ b/frontend/src/pages/client/pycon/evaluate/questionBuilder/QuestionTypeSwitch.tsx
@@ -21,7 +21,7 @@ const QuestionTypeSwitch = <TFieldValues extends FieldValues, TName extends Fiel
       return (
         <Select onValueChange={field.onChange} disabled={disabled}>
           <SelectTrigger>
-            <SelectValue placeholder="Drop down Choices" />
+            <SelectValue placeholder="Dropdown Choices" />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
@@ -79,7 +79,15 @@ const QuestionTypeSwitch = <TFieldValues extends FieldValues, TName extends Fiel
     case 'slider':
       return (
         <div className="w-full">
-          <Slider className="w-full mt-5" min={1} max={5} step={1} onValueChange={field.onChange} disabled={disabled} />
+          <Slider
+            className="w-full mt-5"
+            min={1}
+            max={5}
+            step={1}
+            value={Array.isArray(field.value) && !!field.value.length ? field.value : undefined}
+            onValueChange={field.onChange}
+            disabled={disabled}
+          />
           <div className="flex justify-between px-1 mt-5">
             {[...Array(5)].map((_, index) => (
               <span key={index}>{index + 1}</span>
diff --git a/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts
index 84ab7ac5..72947502 100644
--- a/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts
+++ b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionSchemaBuilder.ts
@@ -6,10 +6,7 @@ export const questionSchemaBuilder = (questions: QuestionConfigItem[]) => {
     (acc, question) => {
       switch (question.questionType) {
         case 'multiple_answers':
-          acc[question.name] = z
-            .array(z.string())
-
-            .min(1, { message: 'Please select at least one option' });
+          acc[question.name] = z.array(z.string()).min(1, { message: 'Please select at least one option' });
           break;
 
         case 'slider':
diff --git a/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts
index 6484b49e..32f3077b 100644
--- a/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts
+++ b/frontend/src/pages/client/pycon/evaluate/questionBuilder/questionsConfig.ts
@@ -6,7 +6,6 @@ export const EVALUATION_QUESTIONS_1: QuestionConfigItem[] = [
     questionType: 'slider',
     question: 'How would you rate PyCon Davao overall? (1–5)',
     options: [],
-
     required: true
   },
   {
@@ -82,10 +81,9 @@ export const EVALUATION_QUESTIONS_2: QuestionConfigItem[] = [
   },
   {
     name: 'were_the_venue_facilities_adequate',
-    questionType: 'radio_buttons',
-
-    question: 'Were the venue facilities adequate?',
-    options: ['Yes', 'No'],
+    questionType: 'slider',
+    question: 'Were the venue facilities adequate? (1–5)',
+    options: [],
     required: true
   },
   {
diff --git a/frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx b/frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx
index c3eec31f..64ca534f 100644
--- a/frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx
+++ b/frontend/src/pages/client/pycon/evaluate/steps/ClaimCertificate.tsx
@@ -24,8 +24,6 @@ const ClaimCertificate: FC<Props> = ({ eventId }) => {
   //   shareToLinkedIn(LinkedInParams);
   // };
 
-  console.log(certificateImgDataURL, isLoading);
-
   if (isLoading) {
     return <Skeleton className="rounded-2xl h-[330px] w-full" />;
   }
@@ -38,10 +36,8 @@ const ClaimCertificate: FC<Props> = ({ eventId }) => {
 
   return (
     <>
-      <h3>Here's your Certificate!</h3>
-      {certificateImgDataURL && (
-        <img src={certificateImgDataURL} className="animate-[fade-in_3s_ease-in-out] rounded-2xl object-center object-cover w-full h-full" />
-      )}
+      <h2 className="text-center text-pycon-orange font-extrabold">Here's your Certificate!</h2>
+      <img src={certificateImgDataURL} alt="certificate" className="animate-[fade-in_3s_ease-in-out] rounded-2xl object-center object-cover w-full h-full" />
       <div className="w-full space-y-10">
         <div className="flex flex-col space-y-4">
           <Button onClick={onDownloadImg} icon="Download" variant="secondaryGradient" className="py-3 px-6">
@@ -56,9 +52,9 @@ const ClaimCertificate: FC<Props> = ({ eventId }) => {
           Share to LinkedIn
         </Button> */}
 
-        <Button onClick={reloadPage} icon="ChevronRight" iconPlacement="right" className="w-full py-3 px-6">
+        {/* <Button onClick={reloadPage} icon="ChevronRight" iconPlacement="right" className="w-full py-3 px-6">
           Evaluate with another user
-        </Button>
+        </Button> */}
       </div>
     </>
   );
diff --git a/frontend/src/pages/client/pycon/register/steps/Stepper.tsx b/frontend/src/pages/client/pycon/register/steps/Stepper.tsx
index 7ab95230..59638916 100644
--- a/frontend/src/pages/client/pycon/register/steps/Stepper.tsx
+++ b/frontend/src/pages/client/pycon/register/steps/Stepper.tsx
@@ -14,13 +14,14 @@ interface StepperProps<T extends Step> {
   stepsToExclude?: T[];
   onStepClick?: (step: T) => void;
   orientation?: 'horizontal' | 'vertical';
+  hideTitle?: boolean;
 }
 
 const STEP_CIRCLE_SIZE = '1.5rem';
 
-const Stepper = <T extends Step>({ steps, currentStep, stepsToExclude, onStepClick, orientation = 'horizontal' }: StepperProps<T>) => {
+const Stepper = <T extends Step>({ steps, currentStep, stepsToExclude, onStepClick, orientation = 'horizontal', hideTitle = false }: StepperProps<T>) => {
   const visibleSteps = steps.filter((step) => step.title && !stepsToExclude?.some((excludeStep) => excludeStep.id === step.id));
-
+  const showTitle = orientation === 'vertical' && !hideTitle;
   const currentStepIndex = visibleSteps.indexOf(currentStep);
 
   return (
@@ -42,7 +43,7 @@ const Stepper = <T extends Step>({ steps, currentStep, stepsToExclude, onStepCli
               ></div>
               {currentStepIndex === index && <img src={durian} className="w-10 scale-150 absolute inset-0 z-5" alt="" />}
 
-              {orientation === 'vertical' && <div className="absolute inset-0 z-6 ms-16 flex items-center">{step.title}</div>}
+              {showTitle && <div className="absolute inset-0 z-6 ms-16 flex items-center">{step.title}</div>}
             </div>
 
             {!isLastStep && <div className={cn('transition-colors', connectorBackground, orientation === 'horizontal' ? 'h-1 flex-1' : 'w-1 flex-1')} />}
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index e53504d5..21e269be 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -3,7 +3,7 @@ import ErrorPage from '@/components/ErrorPage';
 import LoginPage from '@/pages/client/login/LoginPage';
 import PreRegisterPage from '@/pages/client/preregister/PreRegisterPage';
 import PyconClientPage from '@/pages/client/pycon/PyconClientPage';
-import EvaluatePage from '@/pages/client/pycon/evaluate/PyconEvaluatePage';
+import EvaluatePage from '@/pages/client/pycon/evaluate/EvaluatePage';
 import RegisterPage from '@/pages/client/pycon/register/RegisterPage';
 import UserInfoPage from '@/pages/client/pycon/register/UserInfoPage';
 import Callback from './Callback';