diff --git a/package-lock.json b/package-lock.json
index f0955a7..3d80140 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "react-awesome-slider": "^4.1.0",
         "react-dom": "^16.14.0",
         "react-ga": "^2.7.0",
+        "react-hook-form": "^7.48.2",
         "react-router-dom": "^5.3.4",
         "react-scripts": "^3.4.4",
         "react-typical": "^0.1.3",
@@ -15093,6 +15094,21 @@
         "react": "^15.6.2 || ^16.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.48.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz",
+      "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -31262,6 +31278,12 @@
       "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==",
       "requires": {}
     },
+    "react-hook-form": {
+      "version": "7.48.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz",
+      "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 69ad188..3174a8b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react-awesome-slider": "^4.1.0",
     "react-dom": "^16.14.0",
     "react-ga": "^2.7.0",
+    "react-hook-form": "^7.48.2",
     "react-router-dom": "^5.3.4",
     "react-scripts": "^3.4.4",
     "react-typical": "^0.1.3",
diff --git a/src/App.js b/src/App.js
index c0bac4d..aac93a7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ import Coc from './views/Coc';
 import Events from './components/Events/Events';
 import Members from "./components/Members/Members";
 import Achievements from './components/Achievements/Achievements'
+import Form from './components/Form/Form';
 
 // Initialize Google Analytics
 ReactGA.initialize(process.env.REACT_APP_GA_CODE);
@@ -47,6 +48,7 @@ const App = () => {
           <AppRoute exact path="/events" component={Events} layout={LayoutDefault} />
           <AppRoute exact path="/achievements" component={Achievements} layout={LayoutDefault} />
           <AppRoute exact path="/members" component={Members} layout={LayoutDefault}/>
+          <AppRoute exact path="/form" component={Form} layout={LayoutDefault}/>
           
         </Switch>
       )} />
diff --git a/src/assets/scss/form/form.scss b/src/assets/scss/form/form.scss
new file mode 100644
index 0000000..f537285
--- /dev/null
+++ b/src/assets/scss/form/form.scss
@@ -0,0 +1,65 @@
+.form{
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 auto;
+}
+.form-container{
+    gap: 1rem ;
+    max-width:500px;
+    margin:0 auto;
+    width:100%;
+}
+
+.input-box{
+    width: 100% !important;
+    border:1px solid rgba(255, 255, 255, 0.492);
+    outline:none;
+    color:white;
+    border-radius: 6px;
+    padding: 10px;
+    background-color: transparent;
+
+    &::placeholder{
+        font-size: .8rem;
+    }
+}
+
+.form-btn{
+    background-color: rgb(25, 155, 25);
+    border-radius: 6px;
+    cursor:pointer;
+    width: 100%;
+    padding:10px;
+    border:none;
+    outline:none;
+    color:white;
+    transition: all;
+    transition-duration: 150ms;
+
+    &:hover{
+        background-color: white;
+        color:black;
+    }
+}
+
+.form-label{
+    font-size: .8rem;
+}
+
+.flex{
+    display: flex;
+}
+.flex-col{
+    flex-direction: column;
+}
+.flex-wrap{
+    flex-wrap: wrap;
+}
+.flex-center{
+    align-items: center;
+    justify-content: center;
+}
+
+.w-full{
+    width:100%;
+}
\ No newline at end of file
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 7ddef89..d82f8c2 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -134,4 +134,9 @@
 --------------------------------------------------------------*/
 @import "events/events";
 
+/*--------------------------------------------------------------
+# Form
+--------------------------------------------------------------*/
+@import "form/form";
+
 
diff --git a/src/components/Form/Form.jsx b/src/components/Form/Form.jsx
new file mode 100644
index 0000000..53305a4
--- /dev/null
+++ b/src/components/Form/Form.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import Hero2 from '../sections/Hero2';
+
+import SectionHeader from '../sections/partials/SectionHeader';
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+
+    const sectionHeader = {
+        title: 'Recruitment Form 2023-2024',
+    };
+
+    const [mode, setMode] = useState(false)
+    const [display, setDisplay] = useState(false)
+    const changeMode = (e) => {
+        console.log(e.target.value)
+        if (e.target.value === "1") setMode(false)
+        else setMode(true)
+        setDisplay(true)
+    }
+
+    const { register, handleSubmit,reset } = useForm()
+
+    const onSubmit = (data) => {
+        console.log(data)
+        reset()
+    }
+
+    return (
+        <>
+            <Hero2 className="illustration-section-01" />
+
+            <div className="container">
+                <SectionHeader style={{ marginTop: "-30px" }} data={sectionHeader} className="center-content" />
+                <form onSubmit={handleSubmit(onSubmit)} className='form'>
+                    <div className='flex flex-col flex-center form-container'>
+
+                        <div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
+                            <label className='form-label' htmlFor="name">Full Name</label>
+                            <input placeholder='Enter your full name' required {...register("name")} type="text" className='input-box' />
+                        </div>
+                        <div className="flex " style={{ width:"100%", gap: "1rem" }}>
+                            <div className='flex flex-col w-full' style={{ gap: "0.5rem" }}>
+                                <label className='form-label' htmlFor="name">Branch</label>
+                                <select required {...register("branch")} className='input-box'>
+                                    <option selected disabled>Select Branch</option>
+                                    <option value="CSE">CSE</option>
+                                    <option value="CSD">CSD</option>
+                                    <option value="ME">ME</option>
+                                    <option value="ISE">ISE</option>
+                                    <option value="ABC">ABC</option>
+                                    <option value="CDE">CDE</option>
+                                    <option value="XCE">XCE</option>
+                                </select>
+                            </div>
+                            <div className='flex flex-col w-full' style={{ gap: "0.5rem" }}>
+                                <label className='form-label' htmlFor="name">Year</label>
+                                <select required {...register("year")} onChange={(e) => changeMode(e)} className='input-box'>
+                                    <option selected disabled>Select year</option>
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                    <option value="3">3</option>
+                                </select>
+                            </div>
+
+                        </div>
+                        {display && (<>
+                            {mode === true ? (<>
+                                <div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
+                                    <label className='form-label' htmlFor="usn">USN</label>
+                                    <input placeholder='Enter USN' required {...register("usn")} type="text" className='input-box' />
+                                </div>
+                            </>) : (<>
+                                <div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
+                                    <label className='form-label' htmlFor="usn">Registeration No.</label>
+                                    <input placeholder='Enter Reg. No.' required {...register("regno")} type="text" className='input-box' />
+                                </div>
+                            </>)}</>)}
+                        <div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
+                            <label className='form-label' htmlFor="email">Email</label>
+                            <input placeholder='Enter your email' required {...register("email")} type="email" className='input-box' />
+                        </div>
+                        <div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
+                            <label className='form-label' htmlFor="whatsapp">Whatsapp No.</label>
+                            <input placeholder='Enter your whatsapp number' required {...register("whatsapp")} type="tel" className='input-box' />
+                        </div>
+                        <div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
+                            <label className='form-label' htmlFor="whatsapp">Tell us something about yourself {"("}max 100 words{"}"}</label>
+                            <textarea placeholder='I am a....' rows={6} required {...register("bio")} type="tel" className='input-box' />
+                        </div>
+                        <button type = "submit" className='form-btn'>Submit</button>
+                    </div>
+
+                </form>
+            </div>
+        </>
+    )
+}
+
+export default Form
\ No newline at end of file
diff --git a/src/components/layout/Header.js b/src/components/layout/Header.js
index decd65f..eccacf4 100644
--- a/src/components/layout/Header.js
+++ b/src/components/layout/Header.js
@@ -79,7 +79,13 @@ const Header = ({
   )
 
   return (
+    <>
+
     <header {...props} className={classes}>
+    <div style = {{backgroundColor:" #ffb618 ", width:"100%", padding:"10px",textAlign:"center",color:"black",fontWeight:"600"}}>
+      We are recruiting !!&nbsp;
+      <a href="/form" style = {{textDecoration:"underline", color:"black"}}>Click here</a>
+    </div>
       <div className='container'>
         <div
           className={classNames(
@@ -174,6 +180,7 @@ const Header = ({
         </div>
       </div>
     </header>
+    </>
   )
 }
 
@@ -181,3 +188,4 @@ Header.propTypes = propTypes
 Header.defaultProps = defaultProps
 
 export default Header
+  
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 476ded2..a49ac80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9421,6 +9421,11 @@ react-ga@^2.7.0:
   resolved "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz"
   integrity sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==
 
+react-hook-form@^7.48.2:
+  version "7.48.2"
+  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz"
+  integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -9528,7 +9533,7 @@ react-visibility-sensor@^5.0.2:
   dependencies:
     prop-types "^15.7.2"
 
-"react@^15.0.0 || ^16.0.0", "react@^15.6.2 || ^16.0", react@^16.14.0, "react@>= 0.11.2 <= 16", react@>=15, react@>=16.0.0:
+"react@^15.0.0 || ^16.0.0", "react@^15.6.2 || ^16.0", react@^16.14.0, "react@^16.8.0 || ^17 || ^18", "react@>= 0.11.2 <= 16", react@>=15, react@>=16.0.0:
   version "16.14.0"
   resolved "https://registry.npmjs.org/react/-/react-16.14.0.tgz"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==