diff --git a/src/components/marginals/Nav_Hero/Description.jsx b/src/components/marginals/Nav_Hero/Description.jsx
index 578d8b4..7ba50a9 100644
--- a/src/components/marginals/Nav_Hero/Description.jsx
+++ b/src/components/marginals/Nav_Hero/Description.jsx
@@ -4,7 +4,8 @@ import {
   ButtonContainer,
   DescriptionContainer,
   DescriptionParagraph,
-  DescriptionTitle
+  DescriptionTitle,
+  PaymentButton
 } from './Description.styles'
 import { DescriptionContent } from '../../../config/index'
 import { ButtonWrapper } from './Description.styles'
@@ -25,7 +26,13 @@ const Description = () => {
       <ButtonWrapper>
         <ButtonContainer>
           <HelpButton onClick={redirect}>{DescriptionContent.HeroButton}</HelpButton>
-          {!userInfo.name && (
+          {userInfo.name ? (
+            <PaymentButton>
+              <Link target="_blank" to={DescriptionContent.paymentLink}>
+                Pay Now
+              </Link>
+            </PaymentButton>
+          ) : (
             <Link to="/register">
               <RegisterButton>{DescriptionContent.RegisterButton}</RegisterButton>
             </Link>
diff --git a/src/components/marginals/Nav_Hero/Description.styles.jsx b/src/components/marginals/Nav_Hero/Description.styles.jsx
index c4addc2..a4ccda3 100644
--- a/src/components/marginals/Nav_Hero/Description.styles.jsx
+++ b/src/components/marginals/Nav_Hero/Description.styles.jsx
@@ -108,7 +108,33 @@ export const InnerSpan = styled.span`
 export const RegisterButton = styled.button`
   ${tw`
   px-2 
-  py-2
+  py-2 
+  w-full
+  0.4xsm:w-[140px]
+  rounded-[11.53px] 
+  bg-orange-1 
+  text-brown-5 
+  font-semibold 
+  text-1.5lg 
+  md:text-2xl  
+  border-brown-5 
+  border-2 
+  transition 
+  duration-300 
+  ease-in-out 
+  active:transform 
+  active:translate-x-[3px] 
+  active:translate-y-[3px] 
+  active:shadow-none 
+  shadow-[3px 3px 0px #1d1d1d ]`}
+`
+
+export const PaymentButton = styled.button`
+  ${tw`
+  px-2 
+  py-2 
+  w-full
+  0.4xsm:w-[140px]
   rounded-[11.53px] 
   bg-orange-1 
   text-brown-5 
diff --git a/src/components/marginals/Nav_Hero/Nav.jsx b/src/components/marginals/Nav_Hero/Nav.jsx
index 4f4f3f1..0df566e 100644
--- a/src/components/marginals/Nav_Hero/Nav.jsx
+++ b/src/components/marginals/Nav_Hero/Nav.jsx
@@ -57,7 +57,6 @@ const Nav = () => {
 
   function onClick(id) {
     handleScroll(id)
-    console.log(id)
     handleToggle()
   }
 
@@ -92,10 +91,6 @@ const Nav = () => {
         </Menu>
 
         {userInfo.name ? (
-          // <Link to="/" onClick={handleSignOut}>
-          //   <Register>Logout</Register>
-          // </Link>
-
           <ProfileBtn onMouseEnter={() => setProfileOpen(true)}>
             <ProfileMenu isProfileOpen={profileOpen} setProfileOpen={setProfileOpen} />
           </ProfileBtn>
@@ -115,16 +110,13 @@ const Nav = () => {
         <ResMen>
           <ResList>
             {userInfo.name ? (
-              // <Link to="/" onClick={handleSignOut}>
-              //   <SecRegister>Logout</SecRegister>
-              // </Link>
               <button onClick={handleProfileOpen}>
                 <ProfileMenu isProfileOpen={profileOpen} setProfileOpen={setProfileOpen} />
               </button>
             ) : (
-              <button to="/register">
-                <SecRegister>Register...</SecRegister>
-              </button>
+              <Link to="/register">
+                <SecRegister>Register</SecRegister>
+              </Link>
             )}
             {navLinks.map((navLink) => (
               <ResItem key={navLink.id}>
diff --git a/src/components/marginals/Nav_Hero/ProfileMenu.jsx b/src/components/marginals/Nav_Hero/ProfileMenu.jsx
index 3eda274..fe8f664 100644
--- a/src/components/marginals/Nav_Hero/ProfileMenu.jsx
+++ b/src/components/marginals/Nav_Hero/ProfileMenu.jsx
@@ -28,7 +28,6 @@ function ProfileMenu({ isProfileOpen, setProfileOpen }) {
       setUid(userInfo.uid)
       if (userDataInDb?.getUser) {
         setUser(userDataInDb.getUser)
-        // console.log(userDataInDb.getUser)
       }
     }
   }, [userInfo, userDataInDb, uid])
diff --git a/src/components/marginals/Nav_Hero/ProfileMenu.styles.jsx b/src/components/marginals/Nav_Hero/ProfileMenu.styles.jsx
index 3639da2..bd194e8 100644
--- a/src/components/marginals/Nav_Hero/ProfileMenu.styles.jsx
+++ b/src/components/marginals/Nav_Hero/ProfileMenu.styles.jsx
@@ -89,10 +89,19 @@ export const ProfileDropDownItem = styled.div`
 export const NotRegistered = styled.div`
   ${tw`
   text-lg
-  text-brown-2
+  bg-[#1D1D1D]
+  text-[#FFEEDA]
+  rounded-md
+  py-2
+  px-4
   font-Poppins
   font-[500]
   text-center
+  hover:bg-[#FFEEDA]
+  hover:text-[#1D1D1D]
+  active:scale-95
+  duration-300
+  ease-in-out
   `}
 `
 
@@ -126,3 +135,21 @@ export const LogoutButton = styled.button`
   active:scale-95
   `}
 `
+export const PaymentButton = styled.button`
+  ${tw`
+  mt-5
+  bg-orange-1
+  text-[#FFEEDA]
+  rounded-md
+  py-2
+  px-4
+  cursor-pointer
+  font-[500]
+  font-Poppins
+  duration-300
+  ease-in-out
+  hover:bg-[#FFEEDA]
+  hover:text-[#1D1D1D]
+  active:scale-95
+  `}
+`
diff --git a/src/components/marginals/Nav_Hero/ProfileMenuDropDown.jsx b/src/components/marginals/Nav_Hero/ProfileMenuDropDown.jsx
index 5d4a333..63bb14e 100644
--- a/src/components/marginals/Nav_Hero/ProfileMenuDropDown.jsx
+++ b/src/components/marginals/Nav_Hero/ProfileMenuDropDown.jsx
@@ -13,9 +13,12 @@ import {
   NotRegistered,
   ProfileDropDown,
   ProfileDropDownItem,
-  Value
+  Value,
+  PaymentButton
 } from './ProfileMenu.styles'
 
+import { DescriptionContent } from '../../../config/index'
+
 ProfileMenuDropDown.propTypes = {
   setProfileOpen: propTypes.func,
   user: propTypes.object
@@ -47,6 +50,12 @@ function ProfileMenuDropDown({ setProfileOpen, user }) {
                 <Label>{detail.label}:</Label> <Value>{detail.value}</Value>
               </ProfileDropDownItem>
             ))}
+            <PaymentButton>
+              <Link target="_blank" to={DescriptionContent.paymentLink}>
+                {' '}
+                Pay Now
+              </Link>
+            </PaymentButton>
             <LogoutButton onClick={logout}>Logout</LogoutButton>
           </>
         ) : (
diff --git a/src/components/marginals/footer/Footer.jsx b/src/components/marginals/footer/Footer.jsx
index 68079c1..f13bdd3 100644
--- a/src/components/marginals/footer/Footer.jsx
+++ b/src/components/marginals/footer/Footer.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
-import { toast } from 'react-toastify'
-
+import { useState } from 'react'
 import footerData from '../../../config/content/footerData/Footer.js'
+import Modal from '../../modal/Modal'
 // import React from "react";
 import {
   AicheLogo1,
@@ -39,29 +39,20 @@ RenderListItem.propTypes = {
 }
 
 export default function MyFooter() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const openModal = () => setIsModalOpen(true)
+  const closeModal = () => setIsModalOpen(false)
   function showLocation() {
-    toast(
-      <IframeContainer>
-        <Iframe src={footerData.images.map.src} title={footerData.images.map.title} />
-      </IframeContainer>,
-
-      {
-        position: 'bottom-left',
-        autoClose: false,
-        hideProgressBar: true,
-        draggable: true,
-
-        theme: 'dark',
-        style: {
-          width: '200%',
-          height: '100%'
-        }
-      }
-    )
+    openModal()
   }
 
   return (
     <>
+      <Modal open={isModalOpen} onClose={closeModal}>
+        <IframeContainer>
+          <Iframe src={footerData.images.map.src} title={footerData.images.map.title} />
+        </IframeContainer>
+      </Modal>
       <Footer id="contact">
         <FooterTop>
           <Logos>
diff --git a/src/components/modal/Modal.jsx b/src/components/modal/Modal.jsx
new file mode 100644
index 0000000..68351bc
--- /dev/null
+++ b/src/components/modal/Modal.jsx
@@ -0,0 +1,26 @@
+// Modal.js
+import ReactDOM from 'react-dom'
+import { Overlay, ModalContainer, CloseButton } from './Modal.styles'
+import PropTypes from 'prop-types'
+
+const Modal = ({ children, open, onClose }) => {
+  if (!open) return null
+
+  return ReactDOM.createPortal(
+    <Overlay onClick={onClose}>
+      <ModalContainer onClick={(e) => e.stopPropagation()}>
+        <CloseButton onClick={onClose}>&times;</CloseButton>
+        {children}
+      </ModalContainer>
+    </Overlay>,
+    document.getElementById('overlay')
+  )
+}
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
+export default Modal
diff --git a/src/components/modal/Modal.styles.jsx b/src/components/modal/Modal.styles.jsx
new file mode 100644
index 0000000..247f848
--- /dev/null
+++ b/src/components/modal/Modal.styles.jsx
@@ -0,0 +1,21 @@
+// Modal.styles.jsx
+import tw from 'twin.macro'
+import styled from 'styled-components'
+
+export const Overlay = styled.div`
+  ${tw`fixed inset-0 bg-black-1 bg-opacity-50 flex items-center justify-center`}
+  z-index: 50;
+`
+
+export const ModalContainer = styled.div`
+  ${tw`bg-white-1 p-1 0.4xsm:p-6 rounded-lg shadow-lg relative`}
+  width: 90%;
+  max-width: 500px;
+`
+
+export const CloseButton = styled.button`
+  ${tw`absolute top-0 right-0 mt-0 mr-2 rounded-full text-red-500 text-2xl 0.4xsm:text-5xl`}
+  background: none;
+  border: none;
+  cursor: pointer;
+`
diff --git a/src/components/registrationForm/InputField.jsx b/src/components/registrationForm/InputField.jsx
index 3fafbad..1537e68 100644
--- a/src/components/registrationForm/InputField.jsx
+++ b/src/components/registrationForm/InputField.jsx
@@ -15,12 +15,18 @@ function InputField({
   input: { id, label, placeholder, type, extras },
   handleFormData,
   value,
-  error
+  error,
+  showTshirtSizes
 }) {
   const handleChange = (e) => {
     handleFormData(id, e.target.value)
   }
 
+  function handleTshirtCLick(e) {
+    e.preventDefault()
+    showTshirtSizes()
+  }
+
   return (
     <InputContainer key={id}>
       <Label htmlFor={id}>{label}</Label>
@@ -33,7 +39,7 @@ function InputField({
           onChange={handleChange}
         />
         {extras && (
-          <InfoBtn>
+          <InfoBtn onClick={(e) => handleTshirtCLick(e)}>
             <Info src={info} alt="info-icon" />
           </InfoBtn>
         )}
@@ -59,7 +65,8 @@ InputField.propTypes = {
   }).isRequired,
   handleFormData: PropTypes.func.isRequired,
   value: PropTypes.string,
-  error: PropTypes.string
+  error: PropTypes.string,
+  showTshirtSizes: PropTypes.func
 }
 
 export default InputField
diff --git a/src/components/registrationForm/RegisterForm.styles.jsx b/src/components/registrationForm/RegisterForm.styles.jsx
index d606f4c..f9e140d 100644
--- a/src/components/registrationForm/RegisterForm.styles.jsx
+++ b/src/components/registrationForm/RegisterForm.styles.jsx
@@ -21,7 +21,7 @@ export const DateTxT = styled.h1`
   ${tw`text-brown-2 2.7md:text-4xl font-semibold text-3xl`}
 `
 export const FormContainer = styled.form`
-  ${tw`flex flex-col justify-center items-center h-full w-full gap-[24px] md:gap-4 py-5 md:py-10 px-4 md:px-14 bg-transparent`}
+  ${tw`flex flex-col justify-center items-center h-full w-full gap-[24px] md:gap-4 py-5 md:py-16 px-4 md:px-14 bg-transparent`}
 `
 
 export const SignInContainer = styled.div`
@@ -56,3 +56,10 @@ export const MobileHeader = styled.div`
 export const MobileDate = styled.h1`
   ${tw`text-brown-4 text-[23px] font-[600]`}
 `
+
+export const TshirtContainer = styled.div`
+  ${tw`flex flex-col justify-center items-center w-full`}
+`
+export const TshirtImage = styled.img`
+  ${tw`w-full`}
+`
diff --git a/src/components/registrationForm/RegistrationForm.jsx b/src/components/registrationForm/RegistrationForm.jsx
index 24ea121..730793c 100644
--- a/src/components/registrationForm/RegistrationForm.jsx
+++ b/src/components/registrationForm/RegistrationForm.jsx
@@ -2,7 +2,6 @@ import { useContext, useEffect, useState } from 'react'
 
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
-
 import { skipToken, useMutation, useSuspenseQuery } from '@apollo/client'
 
 import { formSchema } from '../../config/content/registrationForm/formSchema'
@@ -12,8 +11,10 @@ import {
   formInputs,
   logo1,
   logo2,
-  mobileLogo
+  mobileLogo,
+  tshirtSizeLink
 } from '../../config/content/registrationForm/Registration'
+import Modal from '../modal/Modal'
 import { AuthContext } from '../../context/AuthContext'
 import { CREATE_USER } from '../../graphQL/mutations/userMutation'
 import { GET_USER_BY_ID } from '../../graphQL/queries/userQueries'
@@ -30,12 +31,19 @@ import {
   LogoSection,
   MobileDate,
   MobileHeader,
-  SignInContainer
+  SignInContainer,
+  TshirtContainer,
+  TshirtImage
 } from './RegisterForm.styles'
 import { uploadToCloudinary } from './uploadToCloudinary'
+// import SwitchInput from './SwitchInput'
 
 export default function RegistrationForm() {
   const orgId = '668bd9deff0327a608b9b6ea'
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const openModal = () => setIsModalOpen(true)
+  const closeModal = () => setIsModalOpen(false)
+
   const [formData, setformData] = useState({
     name: '',
     email: '',
@@ -45,6 +53,7 @@ export default function RegistrationForm() {
     rollNumber: '',
     idCardPhoto: null,
     tSize: ''
+    // isHostelRequired: false
   })
   const initialFormErrors = {
     name: '',
@@ -88,9 +97,7 @@ export default function RegistrationForm() {
     if (userInfo.uid) {
       setIsLoggedIn(true)
       setUid(userInfo.uid)
-      console.log(userInfo.uid)
       const userData = userDataInDb
-      console.log(userData)
       if (userData?.getUser) {
         toast.info('You have already registered!')
         navigate(`/`)
@@ -132,7 +139,12 @@ export default function RegistrationForm() {
       toast.success('You have been registered successfully!')
     } catch (e) {
       console.error(e)
-      toast.error('Failed to register! Please try again!')
+
+      if (e.message.includes('Unique constraint failed')) {
+        toast.error('user already exist!')
+      } else {
+        toast.error(e.message)
+      }
     } finally {
       setIsLoading(false)
     }
@@ -166,55 +178,71 @@ export default function RegistrationForm() {
     }
   }
 
+  function showTshirtSizes() {
+    openModal()
+  }
+
   return (
-    <Container>
-      {(isloading || loading) && <Loader />}
-      <LogoSection>
-        <BackgroundImage src={bg} />
-        <LogoContainer>
-          <img src={logo1} alt="logo" />
+    <>
+      <Modal open={isModalOpen} onClose={closeModal}>
+        <TshirtContainer>
+          <TshirtImage src={tshirtSizeLink} alt="tshirt sizes" />
+        </TshirtContainer>
+      </Modal>
+      <Container>
+        {(isloading || loading) && <Loader />}
+        <LogoSection>
+          <BackgroundImage src={bg} />
+          <LogoContainer>
+            <img src={logo1} alt="logo" />
+            <img src={logo2} alt="logo2" />
+            <DateTxT>{date}</DateTxT>
+          </LogoContainer>
+        </LogoSection>
+
+        <MobileHeader>
+          <img src={mobileLogo} alt="logo" />
           <img src={logo2} alt="logo2" />
-          <DateTxT>{date}</DateTxT>
-        </LogoContainer>
-      </LogoSection>
-
-      <MobileHeader>
-        <img src={mobileLogo} alt="logo" />
-        <img src={logo2} alt="logo2" />
-        <MobileDate>{date}</MobileDate>
-      </MobileHeader>
-
-      {isLoggedIn ? (
-        <FormContainer>
-          {formInputs.map((input) =>
-            input.type === 'file' ? (
-              <FileInput
-                key={input.id}
-                input={input}
-                handleFormData={handleFormData}
-                error={formErrors[input.id]}
-              />
-            ) : (
-              <InputField
-                key={input.id}
-                input={input}
-                value={formData[input.id]}
-                handleFormData={handleFormData}
-                error={formErrors[input.id]}
-              />
-            )
-          )}
-          <Button onClick={(e) => handleSubmit(e)} disabled={loading}>
-            Register
-          </Button>
-        </FormContainer>
-      ) : (
-        <SignInContainer>
-          <Button onClick={signInWithGoogle} disabled={isloading}>
-            Sign in with Google
-          </Button>
-        </SignInContainer>
-      )}
-    </Container>
+          <MobileDate>{date}</MobileDate>
+        </MobileHeader>
+
+        {isLoggedIn ? (
+          <FormContainer>
+            {formInputs.map((input) =>
+              input.type === 'file' ? (
+                <FileInput
+                  key={input.id}
+                  input={input}
+                  handleFormData={handleFormData}
+                  error={formErrors[input.id]}
+                />
+              ) : (
+                <InputField
+                  key={input.id}
+                  input={input}
+                  value={formData[input.id]}
+                  handleFormData={handleFormData}
+                  error={formErrors[input.id]}
+                  showTshirtSizes={showTshirtSizes}
+                />
+              )
+            )}
+            {/* <SwitchInput
+            value={formData.isHostelRequired}
+            handleHostelRequired={handleHostelRequired}
+          /> */}
+            <Button onClick={(e) => handleSubmit(e)} disabled={loading}>
+              Register
+            </Button>
+          </FormContainer>
+        ) : (
+          <SignInContainer>
+            <Button onClick={signInWithGoogle} disabled={isloading}>
+              Sign in with Google
+            </Button>
+          </SignInContainer>
+        )}
+      </Container>
+    </>
   )
 }
diff --git a/src/components/registrationForm/SwitchInput.jsx b/src/components/registrationForm/SwitchInput.jsx
new file mode 100644
index 0000000..dc79fc5
--- /dev/null
+++ b/src/components/registrationForm/SwitchInput.jsx
@@ -0,0 +1,25 @@
+import { Label } from './FileInput.styles'
+import { SwitchButton, SwitchCheckbox, SwitchContainer, SwitchLabel } from './SwitchInput.styles'
+import propTypes from 'prop-types'
+
+SwitchInput.propTypes = {
+  handleHostelRequired: propTypes.func,
+  value: propTypes.bool
+}
+
+export default function SwitchInput({ handleHostelRequired, value }) {
+  return (
+    <SwitchContainer>
+      <Label>Hostel Needed?</Label>
+      <SwitchCheckbox
+        type="checkbox"
+        id="isHostelRequired"
+        value={value}
+        onClick={handleHostelRequired}
+      />
+      <SwitchLabel htmlFor="isHostelRequired">
+        <SwitchButton />
+      </SwitchLabel>
+    </SwitchContainer>
+  )
+}
diff --git a/src/components/registrationForm/SwitchInput.styles.jsx b/src/components/registrationForm/SwitchInput.styles.jsx
new file mode 100644
index 0000000..fcb24f0
--- /dev/null
+++ b/src/components/registrationForm/SwitchInput.styles.jsx
@@ -0,0 +1,25 @@
+import tw from 'twin.macro'
+import styled from 'styled-components'
+
+export const SwitchContainer = styled.section`
+  ${tw`flex items-center justify-start w-full gap-4 mt-5`}
+`
+
+export const SwitchCheckbox = styled.input`
+  ${tw`hidden`}
+
+  &:checked + label span {
+    ${tw`translate-x-full`}
+  }
+`
+
+export const SwitchLabel = styled.label`
+  ${tw`flex items-center cursor-pointer p-1 bg-gray-300 rounded-full w-12 h-6 relative transition duration-300 ease-in-out`}
+  ${SwitchCheckbox}:checked + & {
+    ${tw`bg-orange-1`}
+  }
+`
+
+export const SwitchButton = styled.span`
+  ${tw`bg-white-1 w-5 h-5 rounded-full shadow-md transform transition duration-300 ease-in-out`}
+`
diff --git a/src/config/content/navData/Nav_Hero.js b/src/config/content/navData/Nav_Hero.js
index 98d1b82..10b19db 100644
--- a/src/config/content/navData/Nav_Hero.js
+++ b/src/config/content/navData/Nav_Hero.js
@@ -26,7 +26,9 @@ export const DescriptionContent = {
   content: `Grab a minute, youthful learners, to remind yourself that registration is now open for the Student Regional Conference 2024! Click on the REGISTER link that appears below. The main goal of this conference is to bring individuals from all across the globe to exchange concepts, expertise, and real-world experiences. We have a fantastic lineup of guests, engaging workshops, and hands-on events.Don’t miss this opportunity to take part in something unique. Enrol right away, and be ready for a fantastic conference.`,
   HeroButton: 'Brochure',
   RegisterButton: 'Register',
-  brochureLink: 'https://drive.google.com/file/d/1wEdNjtT4zmo7eePrLRpzAUch1eeKEXDB/view'
+  brochureLink: 'https://drive.google.com/file/d/1wEdNjtT4zmo7eePrLRpzAUch1eeKEXDB/view',
+  paymentLink:
+    'https://docs.google.com/forms/d/e/1FAIpQLSc_s_GoR5BuTg7HC0E2WMouQ-7rJbtjXe1hNAQxPlK4oBIH9Q/viewform'
 }
 
 export const heroContent = {
diff --git a/src/config/content/registrationForm/Registration.js b/src/config/content/registrationForm/Registration.js
index 4a070cb..cd7e7a8 100644
--- a/src/config/content/registrationForm/Registration.js
+++ b/src/config/content/registrationForm/Registration.js
@@ -65,3 +65,6 @@ export const formInputs = [
     extras: 'To know the details about the size'
   }
 ]
+
+export const tshirtSizeLink =
+  'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1720530749/sizes_mpslmi.jpg'
diff --git a/src/graphQL/queries/userQueries.js b/src/graphQL/queries/userQueries.js
index 0b74227..64b81f6 100644
--- a/src/graphQL/queries/userQueries.js
+++ b/src/graphQL/queries/userQueries.js
@@ -8,6 +8,7 @@ export const GET_USER_BY_ID = gql`
       srcID
       college
       createdAt
+      isHostelRequired
     }
   }
 `