diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 2d690f5..4d9d6f7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -54,36 +54,38 @@ export default function Page(): JSX.Element {
   ]
   return (
     <div className="bg-white relative flex flex-col items-center justify-center mt-6">
-      <section className="w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800">
-        <video width="1250" height="240" controls preload="none" className="rounded-2xl bg-black p-1 mt-[1rem] m-4 drop-shadow-xl" autoPlay muted>
-          <source src="test.mp4" type="video/mp4" />
-          <track
-            src={`https://appx-wsb-gcp.akamai.net.in/teachcode/admin/COURSE/cover/1699610005757WhatsApp-Image-2023-11-10-at-3.16.18-PM.jpeg`}
-            kind="subtitles"
-            srcLang="en"
-            label="English"
-          />
-          Your browser does not support the video tag.
-        </video>
-        <h2 className="w-fit bg-transparent cursor-pointer scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0">
-          The Most Awaited Cohort!
-        </h2>
-      </section>
+<section className="w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800">
+  <video width="1250" height="240" controls preload="none" className="rounded-2xl bg-black p-1 mt-[1rem] m-4 drop-shadow-xl" autoPlay muted>
+    <source src="test.mp4" type="video/mp4" />
+    <track
+      src={`https://appx-wsb-gcp.akamai.net.in/teachcode/admin/COURSE/cover/1699610005757WhatsApp-Image-2023-11-10-at-3.16.18-PM.jpeg`}
+      kind="subtitles"
+      srcLang="en"
+      label="English"
+    />
+    Your browser does not support the video tag.
+  </video>
+  <h2 className="w-fit bg-transparent cursor-pointer scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0">
+    The Most Awaited Cohort!
+  </h2>
+</section>
+
+<section className="m-2 w-full p-8 flex flex-col justify-center items-center bg-gray-100 dark:bg-gray-900">
+  <div className="grid grid-cols-1 w-full mt-[3rem]">
+    <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Upcoming Cohorts</h1>
+    <div className="w-full flex flex-col lg:flex-row justify-evenly py-8 gap-2">
+      {courses.map(course => course.status === "Upcoming" ? (<CourseCard course={course} key={course.id} />) : null)}
+    </div>
+  </div>
+</section>
+
+<section className="h-full w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800 pr-2 pl-2">
+  <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Available Cohorts</h1>
+  <div className="w-full flex flex-col lg:flex-row justify-evenly py-8 gap-2">
+    {courses.map(course => course.status !== "Upcoming" ? (<CourseCard course={course} key={course.id} />) : null)}
+  </div>
+</section>
 
-      <section className="w-full p-8 flex flex-col justify-center items-center bg-gray-100 dark:bg-gray-900">
-        <div className="grid grid-cols-2 w-screen mt-[3rem]">
-          <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Upcoming Cohorts</h1>
-          <div className="flex w-screen justify-evenly py-8">
-            {courses.map(course => course.status === "Upcoming" ? (<CourseCard course={course} />) : null)}
-          </div>
-        </div>
-      </section>
-      <section className="w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800">
-        <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Available Cohorts</h1>
-        <div className="flex w-screen justify-evenly py-8">
-          {courses.map(course => course.status !== "Upcoming" ? (<CourseCard course={course} />) : null)}
-        </div>
-      </section>
     </div>
   );
 }
diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
index 0f656d1..48ae64f 100644
--- a/apps/web/src/components/navbar.tsx
+++ b/apps/web/src/components/navbar.tsx
@@ -6,7 +6,7 @@ export default function Navbar() {
   return (
     < nav className="fixed top-0 z-50 flex h-12 w-full items-center gap-2 border-b shadow-sm bg-white dark:bg-gray-900" >
       < div className="mx-auto flex w-full items-center justify-between md:max-w-screen-2xl" >
-        <h2 className='font-bold text-xl'>100xDevs</h2>
+        <h2 className='font-bold text-xl ml-2'><Link   href={'/'}>100xDevs</Link></h2>
         <div className="flex items-center justify-between scale-50 gap-4">
           <Button className="hover:bg-transparent dark:border-white w-fit h-fit cursor-pointer scroll-m-20 pb-2 text-3xl font-semibold tracking-tight border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[5px_5px_0px_0px_rgba(255,255,255)] px-4 py-2 hover:shadow transition duration-200 bg-transparent flex-shrink-0">
             <Link
diff --git a/apps/web/src/components/pre-register-form.tsx b/apps/web/src/components/pre-register-form.tsx
index b0cebd3..9862350 100644
--- a/apps/web/src/components/pre-register-form.tsx
+++ b/apps/web/src/components/pre-register-form.tsx
@@ -12,16 +12,23 @@ export function PreRegForm() {
     email: ""
   })
   const [isOpen, setIsOpen] = useState(false)
+  const [button,setButton]=useState("Register");
   const handleSubmit = async () => {
+    if (!formData.firstName || !formData.lastName || !formData.email) {
+   alert("Fields cannot be empty");
+      return;
+    }
+    setButton("Registering...");
     await fetch("/api", {
       method: "POST", body: JSON.stringify(formData)
     })
+    setButton("Register");
     setIsOpen(false)
   };
   return (
     <Dialog open={isOpen} onOpenChange={() => setIsOpen(prev => !prev)}>
       <DialogTrigger asChild>
-        <Button className="scale-75 text-[2rem] text-black dark:text-white hover:bg-transparent dark:border-white w-fit h-fit cursor-pointer scroll-m-20 pb-2 font-semibold tracking-tight border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[5px_5px_0px_0px_rgba(255,255,255)] px-4 py-2 hover:shadow transition duration-200 bg-transparent flex-shrink-0">Pre Register</Button>
+        <Button className="scale-75 text-[2rem] text-black dark:text-white hover:bg-transparent dark:border-white w-fit h-fit cursor-pointer scroll-m-20 pb-2 font-semibold tracking-tight border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[5px_5px_0px_0px_rgba(255,255,255)] px-4 py-2 hover:shadow transition duration-200 bg-transparent flex-shrink-0">Pre-Register</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
@@ -64,7 +71,7 @@ export function PreRegForm() {
           })
         }} />
         <DialogFooter>
-          <Button type="submit" onClick={handleSubmit}>Register</Button>
+          <Button type="submit" onClick={handleSubmit}>{button}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3f28866..86bbe65 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,6 +17,7 @@
     "./input": "./src/components/ui/input.tsx",
     "./label": "./src/components/ui/label.tsx",
     "./dialog": "./src/components/ui/dialog.tsx"
+   
   },
   "license": "MIT",
   "scripts": {