diff --git a/frontend/src/pages/PreferenceForm.jsx b/frontend/src/pages/PreferenceForm.jsx
new file mode 100644
index 0000000..111de4d
--- /dev/null
+++ b/frontend/src/pages/PreferenceForm.jsx
@@ -0,0 +1,465 @@
+import React from "react";
+import axios from "axios";
+import { useState, useEffect } from "react";
+
+
+export default function PreferenceForm() {
+
+ //to get titles of projects for the dropdown
+ const [details, setDetails] = useState([]);
+
+ useEffect(() => {
+ // Make an HTTP request to fetch the card image from the backend
+ axios.get('/api/projects/')
+ .then((response) => {
+ // Assuming the response contains the image URL
+ console.log(response.data);
+ setDetails(response.data);
+ })
+ .catch((error) => {
+ console.error('Error fetching card image:', error);
+ });
+ }, []);
+
+ // const details = [
+ // {
+ // "id": 1,
+ // "title": "Speech emotion recognition",
+ // "general_category": "ML",
+ // "banner_image": "http://127.0.0.1:8000/media/projects/emotion_detection.png"
+ // },
+ // {
+ // "id": 2,
+ // "title": "Test Project",
+ // "general_category": "Development",
+ // "banner_image": "http://127.0.0.1:8000/media/projects/For_his_participation_in_the_5-day_Grand_Entrepreneur_Workshop_held_by_Liceria__Co..png"
+ // },
+ // {
+ // "id": 3,
+ // "title": "Speech emotion recognition",
+ // "general_category": "Blockchain",
+ // "banner_image": "http://127.0.0.1:8000/media/projects/emotion_detection.png"
+ // },
+ // {
+ // "id": 4,
+ // "title": "Test Project",
+ // "general_category": "CP",
+ // "banner_image": "http://127.0.0.1:8000/media/projects/For_his_participation_in_the_5-day_Grand_Entrepreneur_Workshop_held_by_Liceria__Co..png"
+ // },
+ // {
+ // "id": 5,
+ // "title": "Test Project",
+ // "general_category": "Others",
+ // "banner_image": "http://127.0.0.1:8000/media/projects/For_his_participation_in_the_5-day_Grand_Entrepreneur_Workshop_held_by_Liceria__Co..png"
+ // }
+ // ]
+
+ const [data, setData] = useState({
+ SOC_SOP:'',
+ experience:'',
+ Preference_1:'',
+ SOP_1:'',
+ Preference_2:'',
+ SOP_2:'',
+ Preference_3:'',
+ SOP_3:''
+ })
+
+ const [page, setPage] = useState(0);
+ const [submitted, setSubmitted] = useState(false);
+ const [error, setError] = useState(false);
+
+ const dataChange = (e) => {
+ const { id, value } = e.target
+ setData({
+ ...data,
+ [id]: value,
+ // console.log(projectlist)
+ })
+ setSubmitted(false);
+ console.log('id:', id);
+ console.log('value:', value);
+ console.log(data);
+ }
+
+
+ const handleSubmit = (e) => {
+ console.log(data);
+ e.preventDefault();
+ if (data.SOC_SOP === '' || data.experience === '' || data.Preference_1 === '' || data.Preference_2 === '' || data.Preference_3 === '' || data.SOP_1==='' || data.SOP_2==='' || data.SOP_3==='') {
+ setError(true);
+ } else {
+ setSubmitted(true);
+ setError(false);
+ }
+ axios.post('api/accounts/preference/', data)
+ .then(res => {
+ window.location.href = '/'
+ console.log(res)
+ })
+ .catch(err => console.log(err))
+ }
+
+ const successMessage = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
Thank You
+
+
You have successfully filled the form.
+
+
+
+
+
+
+
+ );
+ };
+
+ // Showing error message if error is true
+ const errorMessage = () => {
+ return (
+
+
+
+
+
+
All fields are required
+
+
+
+ );
+ };
+
+ return (
+ <>
+
+
+ {/* Calling to the methods */}
+
+ {errorMessage()}
+ {successMessage()}
+
+
+
+
+
+
</>Seasons of Code</>
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const Page1 = ({SOC_SOP, experience, dataChange, setPage}) =>{
+ return(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+const Page2 = ({Preference_1, SOP_1, dataChange, setPage, details}) =>{
+ return(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+const Page3 = ({Preference_2, SOP_2, dataChange, setPage, details}) =>{
+ return(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+const Page4 = ({Preference_3, SOP_3, dataChange, setPage, details, handleSubmit}) =>{
+ return(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
index 5cc8c20..9d7f36f 100644
--- a/frontend/src/pages/Register.jsx
+++ b/frontend/src/pages/Register.jsx
@@ -132,7 +132,7 @@ export default function Register() {