From 38c62320d6e2da7c9b1e94e0841d73333f02d078 Mon Sep 17 00:00:00 2001
From: maksdeb_g <mxdave02@gmail.com>
Date: Thu, 3 Sep 2026 13:26:17 +0800
Subject: [PATCH 1/5] feat: misc mobile view

---
 frontend/src/components/Form.tsx              | 14 +++----
 frontend/src/components/Input.tsx             |  5 +--
 .../pages/client/pycon/register/Register.tsx  | 20 +++++-----
 .../register/steps/MiscellaneousStep.tsx      | 39 +++++++++++--------
 4 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/Form.tsx b/frontend/src/components/Form.tsx
index 10d8ff46..ee46e99b 100644
--- a/frontend/src/components/Form.tsx
+++ b/frontend/src/components/Form.tsx
@@ -117,22 +117,18 @@ const FormError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
   } = useFormField();
   const body = error && error?.message ? String(error?.message) : children;
 
-  const getError = () => {
-    if (!body) {
-      return ' ';
-    }
-
-    return body;
-  };
+  if (!body) {
+    return null;
+  }
 
   return (
     <p
       id={formMessageId}
       ref={ref}
-      className={cn('text-[0.8rem]', body && 'text-left font-medium text-negative', !body && 'whitespace-pre', className)}
+      className={cn('text-[0.8rem]', 'text-left font-medium text-negative', className)}
       {...props}
     >
-      {getError()}
+      {body}
     </p>
   );
 });
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index c0202027..a444772b 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -10,9 +10,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={cn(
-        'text-foreground flex h-9 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-50',
-        pyconStyles &&
-          'bg-pycon-dirty-white text-pycon-dark-blue font-inter text-base md:text-lg h-13 md:h-14 px-5 py-3.5 rounded-2xl border-2 border-transparent focus-visible:border-pycon-teal/40 focus-visible:ring-2 focus-visible:ring-pycon-teal/10 placeholder:text-pycon-lavender/60 placeholder:font-normal placeholder:font-inter shadow-xs',
+        'text-foreground flex h-9 w-full rounded-md bg-input px-3 py-1 text-sm 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-50',
+        pyconStyles && 'bg-pycon-dirty-white placeholder:text-pycon-lavender text-pycon-violet font-nunito',
         className
       )}
       ref={ref}
diff --git a/frontend/src/pages/client/pycon/register/Register.tsx b/frontend/src/pages/client/pycon/register/Register.tsx
index 5e934f39..d57eb62e 100644
--- a/frontend/src/pages/client/pycon/register/Register.tsx
+++ b/frontend/src/pages/client/pycon/register/Register.tsx
@@ -21,7 +21,6 @@ import SummaryStep from './steps/SummaryStep';
 import TicketSelectionStep from './steps/TicketSelectionStep';
 import { useRegisterPage } from './useRegisterPage';
 import { useSuccess } from './useSuccess';
-import PyconBackground from '@/routes/layouts/PyconBackground';
 
 const Register: FC = () => {
   const { eventId } = useParams();
@@ -91,27 +90,28 @@ const Register: FC = () => {
   return (
     <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',
+        'flex flex-col grow  px-4 h-full w-full text-pycon-custard font-nunito max-w-6xl mx-auto',
         currentStep.id === 'Success' && 'grow-0'
       )}
     >
+      {currentStep.id === 'Miscellaneous' && <h5 className="!font-inter uppercase opacity-60 font-bold tracking-widest"> Registration </h5>}
       <div className="w-full h-full flex flex-col space-y-4 grow">
         <FormProvider {...form}>
-          {showStepper && !shouldBeVertical && (
-            <div className="w-full my-2">
-              <Stepper orientation="horizontal" steps={STEPS} currentStep={currentStep} stepsToExclude={[STEP_SUCCESS]} />
-            </div>
+          {currentStep.id !== 'EventDetails' && currentStep.id !== 'Success' && (
+            <>
+              <h1 className="text-xl">{currentStep.title}</h1>
+              {currentStep.id === 'Miscellaneous' && (
+                <p className="text-[#072E4766] !font-inter font-normal text-sm"> A few more things to help us make the event better for you. </p>
+              )}
+            </>
           )}
 
-          {currentStep.id !== 'EventDetails' && currentStep.id !== 'Success' && <h1 className="text-xl">{currentStep.title}</h1>}
-
           <div className="flex flex-col md:flex-row w-full h-full grow">
             {showStepper && shouldBeVertical && (
               <div className="my-8 h-[700px]">
                 <Stepper orientation="vertical" steps={STEPS} currentStep={currentStep} stepsToExclude={[STEP_SUCCESS]} />
               </div>
             )}
-
             <div className={cn('space-y-4 grow', currentStep.id !== 'EventDetails' && currentStep.id !== 'Success' && shouldBeVertical && 'ms-[20vw] p-8')}>
               {currentStep.id === 'EventDetails' && <EventDetails event={eventInfo} />}
               {currentStep.id === 'BasicInfo' && <BasicInfoStep />}
@@ -141,8 +141,6 @@ const Register: FC = () => {
           {showFAQs && <FAQs />}
         </FormProvider>
       </div>
-
-      <PyconBackground />
     </section>
   );
 };
diff --git a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
index f3e3af5a..021a5082 100644
--- a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
+++ b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
@@ -17,19 +17,22 @@ interface Props {
 
 const MiscellaneousStep: FC<Props> = () => {
   return (
-    <>
-      <div className="flex flex-col md:flex-row w-full gap-4">
+    <section className="text-black bg-white/50 rounded-[57.2px] p-10">
+      <div className="flex flex-col w-full gap-4">
+        <p className="text-inter font-bold uppercase text-[#072E474D] text-sm">Community</p>
         <FormItem name="communityInvolvement">
           {({ field }) => (
-            <div className="flex flex-col gap-1 grow md:basis-1/2">
-              <FormLabel>Are you a member of any local tech community?</FormLabel>
+            <div className="flex flex-col gap-1 grow md:basis-1/2 bg-[#FFF9F2] p-6 rounded-[38.13px]">
+              <Label htmlFor="communityInvolvement-yes" aria-required>
+                Are you a member of any local tech community?
+                <span className="text-pycon-orange">&nbsp;*</span>
+              </Label>
               <RadioGroup onValueChange={(value) => field.onChange(Boolean(value))} value={field.value} className="flex flex-wrap gap-4 py-3 mt-auto">
                 <div className="flex items-center space-x-2">
                   <RadioGroupItem pyconStyles id="communityInvolvement-yes" checked={!!field.value} value={'true'} />
-                  <Label htmlFor={`communityInvolvement-yes`}>Yes</Label>
-
+                  <Label htmlFor="communityInvolvement-yes">Yes</Label>
                   <RadioGroupItem pyconStyles id="communityInvolvement-no" checked={!field.value} value="" />
-                  <Label htmlFor={`communityInvolvement-no`}>No</Label>
+                  <Label htmlFor="communityInvolvement-no">No</Label>
                 </div>
               </RadioGroup>
               <FormError />
@@ -39,13 +42,14 @@ const MiscellaneousStep: FC<Props> = () => {
 
         <FormItem name="futureVolunteer">
           {({ field }) => (
-            <div className="flex flex-col gap-1 grow md:basis-1/2">
-              <FormLabel>Would you like to volunteer in the future?</FormLabel>
+            <div className="flex flex-col gap-1 grow md:basis-1/2 bg-[#FFF9F2] p-6 rounded-[38.13px]">
+              <Label htmlFor="futureVolunteer-yes">
+                Would you like to volunteer in the future?<span className="text-pycon-orange">&nbsp;*</span>
+              </Label>
               <RadioGroup onValueChange={(value) => field.onChange(Boolean(value))} value={field.value} className="flex flex-wrap gap-4 py-3 mt-auto">
                 <div className="flex items-center space-x-2">
                   <RadioGroupItem pyconStyles id="futureVolunteer-yes" checked={!!field.value} value={'true'} />
                   <Label htmlFor={`futureVolunteer-yes`}>Yes</Label>
-
                   <RadioGroupItem pyconStyles id="futureVolunteer-no" checked={!field.value} value="" />
                   <Label htmlFor={`futureVolunteer-no`}>No</Label>
                 </div>
@@ -55,15 +59,16 @@ const MiscellaneousStep: FC<Props> = () => {
           )}
         </FormItem>
       </div>
-
-      <div className="flex flex-col md:flex-row w-full gap-4">
+      
+      <div className="flex flex-col md:flex-row w-full mt-10 gap-4 text-black">
+        <p className="text-inter font-bold uppercase text-[#072E474D] text-sm">Preferences <span className="lowercase font-light">(optional)</span></p>
         <FormItem name="dietaryRestrictions">
           {({ field }) => (
             <div className="flex flex-col gap-1 grow basis-1/2">
-              <FormLabel optional optionalClass="text-pycon-custard-light">
+              <FormLabel optional optionalClass="sr-only" className="text-pycon-orange uppercase" >
                 Dietary Restrictions
               </FormLabel>
-              <Input pyconStyles type="text" {...field} />
+              <Input pyconStyles placeholder="e.g. vegetarian, nut allergy..." type="text" {...field} />
               <FormError />
             </div>
           )}
@@ -72,16 +77,16 @@ const MiscellaneousStep: FC<Props> = () => {
         <FormItem name="accessibilityNeeds">
           {({ field }) => (
             <div className="flex flex-col gap-1 grow basis-1/2">
-              <FormLabel optional optionalClass="text-pycon-custard-light">
+              <FormLabel optional optionalClass="sr-only" className="text-pycon-orange uppercase">
                 Accessibility Needs
               </FormLabel>
-              <Input pyconStyles type="text" {...field} />
+              <Input pyconStyles placeholder="e.g. wheelchair access, sign language..." type="text" {...field} />
               <FormError />
             </div>
           )}
         </FormItem>
       </div>
-    </>
+    </section>
   );
 };
 

From c2eb7fdae65d0cd0c47ec26d5c7bd45b0563322a Mon Sep 17 00:00:00 2001
From: maksdeb_g <mxdave02@gmail.com>
Date: Thu, 3 Sep 2026 14:35:36 +0800
Subject: [PATCH 2/5] feat: responsive tablet view

---
 .../src/pages/client/pycon/register/steps/MiscellaneousStep.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
index 021a5082..75c871c5 100644
--- a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
+++ b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
@@ -60,7 +60,7 @@ const MiscellaneousStep: FC<Props> = () => {
         </FormItem>
       </div>
       
-      <div className="flex flex-col md:flex-row w-full mt-10 gap-4 text-black">
+      <div className="flex flex-col w-full mt-10 gap-4 text-black">
         <p className="text-inter font-bold uppercase text-[#072E474D] text-sm">Preferences <span className="lowercase font-light">(optional)</span></p>
         <FormItem name="dietaryRestrictions">
           {({ field }) => (

From 62517b6ba736d7d3a3d81192a1e9d856803fbf85 Mon Sep 17 00:00:00 2001
From: maksdeb_g <mxdave02@gmail.com>
Date: Thu, 3 Sep 2026 16:50:24 +0800
Subject: [PATCH 3/5] style: used pre-existing styling for tailwind classes

---
 .../pycon/register/steps/MiscellaneousStep.tsx       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
index 75c871c5..e3e142cf 100644
--- a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
+++ b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
@@ -17,12 +17,12 @@ interface Props {
 
 const MiscellaneousStep: FC<Props> = () => {
   return (
-    <section className="text-black bg-white/50 rounded-[57.2px] p-10">
+    <section className="text-pycon-dark-blue bg-white/50 rounded-[40px] p-10">
       <div className="flex flex-col w-full gap-4">
-        <p className="text-inter font-bold uppercase text-[#072E474D] text-sm">Community</p>
+        <p className="font-inter font-bold uppercase text-pycon-dark-blue/40 text-sm">Community</p>
         <FormItem name="communityInvolvement">
           {({ field }) => (
-            <div className="flex flex-col gap-1 grow md:basis-1/2 bg-[#FFF9F2] p-6 rounded-[38.13px]">
+            <div className="flex flex-col gap-1 grow md:basis-1/2 bg-pycon-dirty-white p-6 rounded-[38.13px]">
               <Label htmlFor="communityInvolvement-yes" aria-required>
                 Are you a member of any local tech community?
                 <span className="text-pycon-orange">&nbsp;*</span>
@@ -42,7 +42,7 @@ const MiscellaneousStep: FC<Props> = () => {
 
         <FormItem name="futureVolunteer">
           {({ field }) => (
-            <div className="flex flex-col gap-1 grow md:basis-1/2 bg-[#FFF9F2] p-6 rounded-[38.13px]">
+            <div className="flex flex-col gap-1 grow md:basis-1/2 bg-pycon-dirty-white p-6 rounded-[38.13px]">
               <Label htmlFor="futureVolunteer-yes">
                 Would you like to volunteer in the future?<span className="text-pycon-orange">&nbsp;*</span>
               </Label>
@@ -60,8 +60,8 @@ const MiscellaneousStep: FC<Props> = () => {
         </FormItem>
       </div>
       
-      <div className="flex flex-col w-full mt-10 gap-4 text-black">
-        <p className="text-inter font-bold uppercase text-[#072E474D] text-sm">Preferences <span className="lowercase font-light">(optional)</span></p>
+      <div className="flex flex-col w-full mt-10 gap-4">
+        <p className="font-inter font-bold uppercase text-pycon-dark-blue/40 text-sm">Preferences <span className="lowercase font-light">(optional)</span></p>
         <FormItem name="dietaryRestrictions">
           {({ field }) => (
             <div className="flex flex-col gap-1 grow basis-1/2">

From 4bc2d44ba1a19a87645718176575d554a9a892f1 Mon Sep 17 00:00:00 2001
From: seangaaab <seangabbayron@gmail.com>
Date: Sat, 5 Sep 2026 14:58:54 +0800
Subject: [PATCH 4/5] feat: UI improvements

---
 frontend/src/components/Form.tsx  | 14 +++++++++-----
 frontend/src/components/Input.tsx |  4 ++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Form.tsx b/frontend/src/components/Form.tsx
index ee46e99b..10d8ff46 100644
--- a/frontend/src/components/Form.tsx
+++ b/frontend/src/components/Form.tsx
@@ -117,18 +117,22 @@ const FormError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
   } = useFormField();
   const body = error && error?.message ? String(error?.message) : children;
 
-  if (!body) {
-    return null;
-  }
+  const getError = () => {
+    if (!body) {
+      return ' ';
+    }
+
+    return body;
+  };
 
   return (
     <p
       id={formMessageId}
       ref={ref}
-      className={cn('text-[0.8rem]', 'text-left font-medium text-negative', className)}
+      className={cn('text-[0.8rem]', body && 'text-left font-medium text-negative', !body && 'whitespace-pre', className)}
       {...props}
     >
-      {body}
+      {getError()}
     </p>
   );
 });
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index a444772b..7aff8be9 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -10,8 +10,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={cn(
-        'text-foreground flex h-9 w-full rounded-md bg-input px-3 py-1 text-sm 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-50',
-        pyconStyles && 'bg-pycon-dirty-white placeholder:text-pycon-lavender text-pycon-violet font-nunito',
+        'text-foreground flex h-9 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-50',
+        pyconStyles && 'border-none shadow-none bg-pycon-dirty-white placeholder:text-pycon-lavender text-pycon-violet font-nunito',
         className
       )}
       ref={ref}

From ec12faa78852abce288d364d6090effb96946628 Mon Sep 17 00:00:00 2001
From: seangaaab <seangabbayron@gmail.com>
Date: Sat, 5 Sep 2026 14:59:43 +0800
Subject: [PATCH 5/5] style: prettify code

---
 .../RichContent/RichTextContent.test.ts       |  5 +-
 .../RichContent/RichTextContent.tsx           |  4 +-
 frontend/src/model/evaluations.ts             |  9 +--
 frontend/src/model/preregistrations.ts        | 33 +++++-----
 frontend/src/model/pycon/evaluations.ts       |  9 +--
 frontend/src/model/pycon/registrations.ts     |  3 +-
 .../pages/client/pycon/register/Register.tsx  |  8 +--
 .../register/steps/MiscellaneousStep.tsx      | 66 ++++++++++++++-----
 frontend/src/styles/pycon.css                 |  1 -
 frontend/vite.config.ts                       | 27 ++++----
 10 files changed, 92 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/RichContent/RichTextContent.test.ts b/frontend/src/components/RichContent/RichTextContent.test.ts
index c4ee99ef..6746cf45 100644
--- a/frontend/src/components/RichContent/RichTextContent.test.ts
+++ b/frontend/src/components/RichContent/RichTextContent.test.ts
@@ -1,11 +1,10 @@
-import type { Content } from '@tiptap/react';
 import { describe, expect, it } from 'vitest';
 import { sanitizeRichContent, sanitizeRichHtmlContent } from './RichTextContent';
+import type { Content } from '@tiptap/react';
 
 describe('RichTextContent XSS protections', () => {
   it('sanitizes malicious HTML strings', () => {
-    const maliciousHtml =
-      '<p>Safe text</p><img src="x" onerror="alert(1)" /><script>alert("xss")</script><a href="javascript:alert(1)">click</a>';
+    const maliciousHtml = '<p>Safe text</p><img src="x" onerror="alert(1)" /><script>alert("xss")</script><a href="javascript:alert(1)">click</a>';
 
     const sanitizedHtml = sanitizeRichHtmlContent(maliciousHtml).toLowerCase();
 
diff --git a/frontend/src/components/RichContent/RichTextContent.tsx b/frontend/src/components/RichContent/RichTextContent.tsx
index 5f192d2b..632c5442 100644
--- a/frontend/src/components/RichContent/RichTextContent.tsx
+++ b/frontend/src/components/RichContent/RichTextContent.tsx
@@ -1,10 +1,10 @@
+import DOMPurify from 'dompurify';
 import { cn } from '@/utils/classes';
 import './RichContent.css';
 import Placeholder from '@tiptap/extension-placeholder';
 import TextAlign from '@tiptap/extension-text-align';
 import { Content, EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
-import DOMPurify from 'dompurify';
 
 interface RichTextContentProps {
   content: Content;
@@ -61,4 +61,4 @@ function RichTextContent({ content, className }: RichTextContentProps) {
   return <EditorContent editor={editor} />;
 }
 
-export default RichTextContent;
\ No newline at end of file
+export default RichTextContent;
diff --git a/frontend/src/model/evaluations.ts b/frontend/src/model/evaluations.ts
index b9905dcf..b49f9753 100644
--- a/frontend/src/model/evaluations.ts
+++ b/frontend/src/model/evaluations.ts
@@ -1,12 +1,5 @@
 type QuestionType =
-  | 'text_short'
-  | 'text_long'
-  | 'multiple_choice_dropdown'
-  | 'multiple_choice'
-  | 'multiple_choice_dropdown'
-  | 'multiple_answers'
-  | 'slider'
-  | 'radio_buttons';
+  'text_short' | 'text_long' | 'multiple_choice_dropdown' | 'multiple_choice' | 'multiple_choice_dropdown' | 'multiple_answers' | 'slider' | 'radio_buttons';
 
 export interface QuestionConfigItem {
   questionType: QuestionType;
diff --git a/frontend/src/model/preregistrations.ts b/frontend/src/model/preregistrations.ts
index 5d461468..477b15c1 100644
--- a/frontend/src/model/preregistrations.ts
+++ b/frontend/src/model/preregistrations.ts
@@ -4,23 +4,22 @@ import { Registration } from './registrations';
 
 export type AcceptanceStatus = 'PENDING' | 'ACCEPTED' | 'REJECTED';
 
-export interface PreRegistration
-  extends Omit<
-    Registration,
-    | 'certificateClaimed'
-    | 'amountPaid'
-    | 'paymentId'
-    | 'registrationId'
-    | 'referenceNumber'
-    | 'gcashPayment'
-    | 'gcashPaymentUrl'
-    | 'discountCode'
-    | 'type'
-    | 'certificateGenerated'
-    | 'certificateClaimed'
-    | 'certificateImgObjectKey'
-    | 'certificatePdfObjectKey'
-  > {
+export interface PreRegistration extends Omit<
+  Registration,
+  | 'certificateClaimed'
+  | 'amountPaid'
+  | 'paymentId'
+  | 'registrationId'
+  | 'referenceNumber'
+  | 'gcashPayment'
+  | 'gcashPaymentUrl'
+  | 'discountCode'
+  | 'type'
+  | 'certificateGenerated'
+  | 'certificateClaimed'
+  | 'certificateImgObjectKey'
+  | 'certificatePdfObjectKey'
+> {
   type: 'preregistration';
   acceptanceStatus: AcceptanceStatus;
   preRegistrationId: string;
diff --git a/frontend/src/model/pycon/evaluations.ts b/frontend/src/model/pycon/evaluations.ts
index 88437aca..b959de48 100644
--- a/frontend/src/model/pycon/evaluations.ts
+++ b/frontend/src/model/pycon/evaluations.ts
@@ -1,12 +1,5 @@
 type QuestionType =
-  | 'text_short'
-  | 'text_long'
-  | 'multiple_choice_dropdown'
-  | 'multiple_choice'
-  | 'multiple_choice_dropdown'
-  | 'multiple_answers'
-  | 'slider'
-  | 'radio_buttons';
+  'text_short' | 'text_long' | 'multiple_choice_dropdown' | 'multiple_choice' | 'multiple_choice_dropdown' | 'multiple_answers' | 'slider' | 'radio_buttons';
 
 export interface QuestionConfigItem {
   questionType: QuestionType;
diff --git a/frontend/src/model/pycon/registrations.ts b/frontend/src/model/pycon/registrations.ts
index 07c35bf8..c5393670 100644
--- a/frontend/src/model/pycon/registrations.ts
+++ b/frontend/src/model/pycon/registrations.ts
@@ -94,7 +94,8 @@ export const mapCreateRegistrationDataForPayment = (registration: RegisterFormVa
 export const mapCreateRegistrationValues = (registration: RegisterFormValues, eventId: string, email?: string): CreateRegistration => ({
   ...mapCreateRegistrationDataForPayment(registration, eventId, email),
   amountPaid: roundUpToTwoDecimals(registration.total),
-  transactionId: registration.transactionId || `price-${registration.total}-${registration.discountCode || 'null'}-${crypto.randomUUID().slice(0, 5).toUpperCase()}`
+  transactionId:
+    registration.transactionId || `price-${registration.total}-${registration.discountCode || 'null'}-${crypto.randomUUID().slice(0, 5).toUpperCase()}`
 });
 
 export type UpdateRegistration = Omit<Registration, 'registrationId' | 'amountPaid' | 'transactionId' | 'discountCode' | 'createDate' | 'updateDate'>;
diff --git a/frontend/src/pages/client/pycon/register/Register.tsx b/frontend/src/pages/client/pycon/register/Register.tsx
index d57eb62e..e26c84e0 100644
--- a/frontend/src/pages/client/pycon/register/Register.tsx
+++ b/frontend/src/pages/client/pycon/register/Register.tsx
@@ -21,6 +21,7 @@ import SummaryStep from './steps/SummaryStep';
 import TicketSelectionStep from './steps/TicketSelectionStep';
 import { useRegisterPage } from './useRegisterPage';
 import { useSuccess } from './useSuccess';
+import PyconBackground from '@/routes/layouts/PyconBackground';
 
 const Register: FC = () => {
   const { eventId } = useParams();
@@ -89,10 +90,7 @@ const Register: FC = () => {
 
   return (
     <section
-      className={cn(
-        'flex flex-col grow  px-4 h-full w-full text-pycon-custard font-nunito max-w-6xl mx-auto',
-        currentStep.id === 'Success' && 'grow-0'
-      )}
+      className={cn('flex flex-col grow  px-4 h-full w-full text-pycon-custard font-nunito max-w-6xl mx-auto', currentStep.id === 'Success' && 'grow-0')}
     >
       {currentStep.id === 'Miscellaneous' && <h5 className="!font-inter uppercase opacity-60 font-bold tracking-widest"> Registration </h5>}
       <div className="w-full h-full flex flex-col space-y-4 grow">
@@ -141,6 +139,8 @@ const Register: FC = () => {
           {showFAQs && <FAQs />}
         </FormProvider>
       </div>
+
+      <PyconBackground />
     </section>
   );
 };
diff --git a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
index e3e142cf..7334b2b8 100644
--- a/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
+++ b/frontend/src/pages/client/pycon/register/steps/MiscellaneousStep.tsx
@@ -27,12 +27,34 @@ const MiscellaneousStep: FC<Props> = () => {
                 Are you a member of any local tech community?
                 <span className="text-pycon-orange">&nbsp;*</span>
               </Label>
-              <RadioGroup onValueChange={(value) => field.onChange(Boolean(value))} value={field.value} className="flex flex-wrap gap-4 py-3 mt-auto">
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem pyconStyles id="communityInvolvement-yes" checked={!!field.value} value={'true'} />
-                  <Label htmlFor="communityInvolvement-yes">Yes</Label>
-                  <RadioGroupItem pyconStyles id="communityInvolvement-no" checked={!field.value} value="" />
-                  <Label htmlFor="communityInvolvement-no">No</Label>
+              <RadioGroup
+                onValueChange={(val) => field.onChange(val === 'true')}
+                value={typeof field.value === 'boolean' ? String(field.value) : undefined}
+                className="flex flex-wrap gap-4 py-3 mt-auto"
+              >
+                <div className="flex items-center gap-6">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem
+                      pyconStyles
+                      id="communityInvolvement-yes"
+                      value="true"
+                      className="border-pycon-dark-blue/30 bg-transparent cursor-pointer"
+                    />
+                    <Label htmlFor="communityInvolvement-yes" className="cursor-pointer font-medium text-pycon-dark-blue">
+                      Yes
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem
+                      pyconStyles
+                      id="communityInvolvement-no"
+                      value="false"
+                      className="border-pycon-dark-blue/30 bg-transparent cursor-pointer"
+                    />
+                    <Label htmlFor="communityInvolvement-no" className="cursor-pointer font-medium text-pycon-dark-blue">
+                      No
+                    </Label>
+                  </div>
                 </div>
               </RadioGroup>
               <FormError />
@@ -46,12 +68,24 @@ const MiscellaneousStep: FC<Props> = () => {
               <Label htmlFor="futureVolunteer-yes">
                 Would you like to volunteer in the future?<span className="text-pycon-orange">&nbsp;*</span>
               </Label>
-              <RadioGroup onValueChange={(value) => field.onChange(Boolean(value))} value={field.value} className="flex flex-wrap gap-4 py-3 mt-auto">
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem pyconStyles id="futureVolunteer-yes" checked={!!field.value} value={'true'} />
-                  <Label htmlFor={`futureVolunteer-yes`}>Yes</Label>
-                  <RadioGroupItem pyconStyles id="futureVolunteer-no" checked={!field.value} value="" />
-                  <Label htmlFor={`futureVolunteer-no`}>No</Label>
+              <RadioGroup
+                onValueChange={(val) => field.onChange(val === 'true')}
+                value={typeof field.value === 'boolean' ? String(field.value) : undefined}
+                className="flex flex-wrap gap-4 py-3 mt-auto"
+              >
+                <div className="flex items-center gap-6">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem pyconStyles id="futureVolunteer-yes" value="true" className="border-pycon-dark-blue/30 bg-transparent cursor-pointer" />
+                    <Label htmlFor="futureVolunteer-yes" className="cursor-pointer font-medium text-pycon-dark-blue">
+                      Yes
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem pyconStyles id="futureVolunteer-no" value="false" className="border-pycon-dark-blue/30 bg-transparent cursor-pointer" />
+                    <Label htmlFor="futureVolunteer-no" className="cursor-pointer font-medium text-pycon-dark-blue">
+                      No
+                    </Label>
+                  </div>
                 </div>
               </RadioGroup>
               <FormError />
@@ -59,13 +93,15 @@ const MiscellaneousStep: FC<Props> = () => {
           )}
         </FormItem>
       </div>
-      
+
       <div className="flex flex-col w-full mt-10 gap-4">
-        <p className="font-inter font-bold uppercase text-pycon-dark-blue/40 text-sm">Preferences <span className="lowercase font-light">(optional)</span></p>
+        <p className="font-inter font-bold uppercase text-pycon-dark-blue/40 text-sm">
+          Preferences <span className="lowercase font-light">(optional)</span>
+        </p>
         <FormItem name="dietaryRestrictions">
           {({ field }) => (
             <div className="flex flex-col gap-1 grow basis-1/2">
-              <FormLabel optional optionalClass="sr-only" className="text-pycon-orange uppercase" >
+              <FormLabel optional optionalClass="sr-only" className="text-pycon-orange uppercase">
                 Dietary Restrictions
               </FormLabel>
               <Input pyconStyles placeholder="e.g. vegetarian, nut allergy..." type="text" {...field} />
diff --git a/frontend/src/styles/pycon.css b/frontend/src/styles/pycon.css
index 5e787215..c1e84a9f 100644
--- a/frontend/src/styles/pycon.css
+++ b/frontend/src/styles/pycon.css
@@ -58,4 +58,3 @@ body[data-page='pycon'] {
     @apply font-sora font-extrabold text-pycon-teal scroll-m-20 text-4xl tracking-tight lg:text-5xl;
   }
 }
-
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 991c7551..0f3dac78 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,8 +1,8 @@
 import path from 'path';
 import { defineConfig } from 'vite';
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 // import { VitePWA } from 'vite-plugin-pwa';
 import react from '@vitejs/plugin-react';
-import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -12,24 +12,23 @@ export default defineConfig(({ mode }) => {
       ViteImageOptimizer({
         svg: {
           plugins: [
-          {
-            name: 'removeMetadata',
-          },
-          {
-            name: 'removeViewBox',
-          },
-          
-        ]},
+            {
+              name: 'removeMetadata'
+            },
+            {
+              name: 'removeViewBox'
+            }
+          ]
+        },
         png: {
-            quality: 80
+          quality: 80
         },
         jpeg: {
-            quality: 80
+          quality: 80
         },
         jpg: {
-            quality: 80
-        },
-
+          quality: 80
+        }
       })
       // VitePWA({
       //   registerType: 'autoUpdate', // Automatically update the service worker