diff --git a/components/common/EventPopup/AcmEventHeads.tsx b/components/common/EventPopup/AcmEventHeads.tsx
index b7499edb..23cd3d9b 100644
--- a/components/common/EventPopup/AcmEventHeads.tsx
+++ b/components/common/EventPopup/AcmEventHeads.tsx
@@ -21,6 +21,8 @@ export default function AcmEventHeads({ teamTitle, pills, setPills, setEmptyErro
     const [showSearchResults, setShowSearchResults] = useState(true)
     const { data: session } = useSession();
     const token = getCookieData(session).data.token
+    const [cursor, setCursor] = useState(-1)
+    const [mousePointer, setMousePointer] = useState(-1)
 
     const searchUsersApi = useCallback((pattern: string) => {
         getMatchingUsersApi(pattern, token)
@@ -66,6 +68,7 @@ export default function AcmEventHeads({ teamTitle, pills, setPills, setEmptyErro
             setNameSearchValue("")
             setDebouncedValue("")
             setSearchResult([])
+            setCursor(-1)
             setEmptyError(false)
             setPills((prevState) => {
                 return [...prevState, pill];
@@ -89,9 +92,32 @@ export default function AcmEventHeads({ teamTitle, pills, setPills, setEmptyErro
     const handleBlur = () => {
         setTimeout ( () => {
             setShowSearchResults(false)
+            setCursor(-1)
         }, 500)
     }
 
+    const keyboardNavigation = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            if (cursor < searchResult.length && cursor != -1) {
+                addUserToPills(searchResult[cursor])
+            }
+        }
+        if (e.key === "ArrowUp") {
+            if (cursor > 0) {
+                setCursor( cursor => cursor - 1)
+            }
+        }
+        if (e.key === "ArrowDown") {
+            if (cursor < searchResult.length - 1) {
+                setCursor( cursor => cursor + 1)
+            }
+        }
+        if (e.key === "Escape") {
+            setShowSearchResults(false)
+            setCursor(-1)
+        }
+    }
+
     return (
         <div className={styles['acm-event-heads-container']}>
             <div className={styles.pillInputDiv}>
@@ -103,26 +129,45 @@ export default function AcmEventHeads({ teamTitle, pills, setPills, setEmptyErro
                     className={styles.pillInput}
                     placeholder={`Search ${teamTitle}*`}
                     onBlur={handleBlur}
+                    onKeyDown={keyboardNavigation}
                 />
             </div>
 
             <div>
                 {
                     showSearchResults &&
-                    <div className={styles['pills-container']}>
-                        {searchResult.map((pill: Pill) =>
-                            <div
+                    <ul className={styles['pills-container']}>
+                        {searchResult.map((pill: Pill) => {
+                            const idxOfPill = searchResult.indexOf(pill)
+                            return <div
                                 onClick={() => addUserToPills(pill)}
                                 key={pill.email}
-                                className={styles['pill']}
+                                style={{
+                                    backgroundColor: cursor === idxOfPill || mousePointer === idxOfPill ? "#0a69da" : "white",
+                                    color: cursor === idxOfPill || mousePointer === idxOfPill ? "white" : "black",
+                                    padding: '10px',
+                                    margin: 0,
+                                    cursor: 'pointer'
+                                }}
+                                onMouseEnter={() => setCursor(searchResult.indexOf(pill))}
+                                onMouseLeave={() => setCursor(-1)}
                             >
                                 {pill.name}
-                                <p>
+                                <p
+                                    style={{
+                                        color: cursor === searchResult.indexOf(pill) || mousePointer === idxOfPill ? "white" : "grey",
+                                        fontSize: 'small',
+                                        overflow: 'clip',
+                                        margin: 0
+                                    }}
+                                >
                                     {pill.email}
                                 </p>
                             </div>
+                        }
+
                         )}
-                    </div>
+                    </ul>
                 }
             </div>
         </div>
diff --git a/components/common/EventPopup/EventPopup.tsx b/components/common/EventPopup/EventPopup.tsx
index 8a6d5790..36da6f6c 100644
--- a/components/common/EventPopup/EventPopup.tsx
+++ b/components/common/EventPopup/EventPopup.tsx
@@ -1,11 +1,11 @@
 import React, { ChangeEvent, useState } from 'react'
 import { Alert, Dialog, Snackbar, TextField } from '@mui/material';
 import styles from "../../../styles/components/EventPopup.module.scss";
+import LoaderStyles from "../../../styles/components/Loader.module.scss";
 import { Event } from "react-big-calendar";
 import Image from 'next/image';
 import { RxCross2 } from 'react-icons/rx';
 import { Common } from '../../../constants/common';
-import { Button } from '@mui/material'
 import AcmEventHeads from "./AcmEventHeads";
 import { Pill } from "./Pill";
 import { endEventApi } from "../../../repository/endEvent/endEventApi";
@@ -133,172 +133,225 @@ function DialogPopup({
     }
 
     return (
-        !showModal ?
-
-            <Dialog
-                fullWidth={true}
-                maxWidth={'sm'}
-                open={true}
-                onClose={handleClose}
-                sx={{ padding: "0", margin: "0", backdropFilter: "blur(5px)" }}
-                PaperProps={{ sx: { borderRadius: "10px" } }}
-            >
-                <div className={styles.modal}>
-                    <div className={styles.modalHeading}>
-                        <h2>{title}</h2>
-                        <div className={styles.closeIcon} onClick={handleClose}>
-                            <RxCross2 size={25} color={Common.primaryColor} />
+        <>
+            {
+                loading &&
+                <Dialog
+                    fullWidth={true}
+                    maxWidth={'sm'}
+                    open={true}
+                    sx={{padding: "0", margin: "0", backdropFilter: "blur(5px)"}}
+                    PaperProps={{sx: {borderRadius: "10px"}}}
+                >
+                    <div
+                        className={styles.modal}
+                    >
+                        <div className={LoaderStyles['profile-main-loader']}>
+                            <div className={LoaderStyles["loader"]}>
+                                <svg className={LoaderStyles["circular-loader"]} viewBox="25 25 50 50">
+                                    <circle className={LoaderStyles["loader-path"]} cx="50" cy="50" r="20" fill="none"
+                                            stroke="#0075FF" strokeWidth="2"/>
+                                </svg>
+                            </div>
                         </div>
+                        <p
+                            style={{
+                                textAlign: "center",
+                                fontSize: "20px",
+                                fontWeight: "bold",
+                                marginTop: '10px'
+                            }}
+                        >
+                            Persisting your transaction
+                        </p>
                     </div>
+                </Dialog>
+            }
 
-                    <div className={styles.content}>
-                        <Image
-                            src={imageUrl}
-                            alt={`${title} event poster`}
-                            width={200}
-                            height={200}
-                        />
-                        <div className={styles.text}>
-                            <div className={styles.subtitle}>
-                                <div>
-                                    {finalDateString(
-                                        getDateString(
-                                            startDate.getDate(),
-                                            startDate.getMonth(),
-                                            startDate.getFullYear()
-                                        ),
-                                        getDateString(
-                                            endDate.getDate(),
-                                            endDate.getMonth(),
-                                            endDate.getFullYear()
-                                        ),
-                                        startDate.toLocaleTimeString("en-US", {
-                                            hour: "2-digit",
-                                            minute: "2-digit",
-                                            timeZone: "Asia/Kolkata",
-                                        })
-                                    )}
+            {!loading && (
+                !showModal ?
+
+                    <Dialog
+                        fullWidth={true}
+                        maxWidth={'sm'}
+                        open={true}
+                        onClose={handleClose}
+                        sx={{padding: "0", margin: "0", backdropFilter: "blur(5px)"}}
+                        PaperProps={{sx: {borderRadius: "10px"}}}
+                    >
+                        <div className={styles.modal}>
+                            <div className={styles.modalHeading}>
+                                <h2>{title}</h2>
+                                <div className={styles.closeIcon} onClick={handleClose}>
+                                    <RxCross2 size={25} color={Common.primaryColor}/>
                                 </div>
                             </div>
-                            <p>{venue}</p>
-                            <p>{description}</p>
-                        </div>
-                    </div>
-                    <div style={{
-                        width:"100%",
-                        textAlign:"right",
-                    }}>
-                        {
-                            (designation === 'Admin' ||
-                            designation === 'Core') && token && !ended ?
-                            <button onClick={ () => setShowModal(true) }>End Event</button> : <></>
-                        }
-                    </div>
-                </div>
-            </Dialog> :
 
-            <Dialog
-                fullWidth={true}
-                maxWidth={'md'}
-                open={true}
-                sx={{ padding: "0", margin: "0", backdropFilter: "blur(5px)" }}
-                PaperProps={{ sx: { borderRadius: "10px" } }}
-            >
-                <div className={styles.modal}>
-                    <div className={styles.modalHeading}>
-                        <h2>{title}</h2>
-                        <div className={styles.closeIcon} onClick={handleClose}>
-                            <RxCross2 size={25} color={Common.primaryColor} />
+                            <div className={styles.content}>
+                                <Image
+                                    src={imageUrl}
+                                    alt={`${title} event poster`}
+                                    width={200}
+                                    height={200}
+                                />
+                                <div className={styles.text}>
+                                    <div className={styles.subtitle}>
+                                        <div>
+                                            {finalDateString(
+                                                getDateString(
+                                                    startDate.getDate(),
+                                                    startDate.getMonth(),
+                                                    startDate.getFullYear()
+                                                ),
+                                                getDateString(
+                                                    endDate.getDate(),
+                                                    endDate.getMonth(),
+                                                    endDate.getFullYear()
+                                                ),
+                                                startDate.toLocaleTimeString("en-US", {
+                                                    hour: "2-digit",
+                                                    minute: "2-digit",
+                                                    timeZone: "Asia/Kolkata",
+                                                })
+                                            )}
+                                        </div>
+                                    </div>
+                                    <p>{venue}</p>
+                                    <p>{description}</p>
+                                </div>
+                            </div>
+                            <div style={{
+                                width: "100%",
+                                textAlign: "right",
+                            }}>
+                                {
+                                    (designation === 'Admin' ||
+                                        designation === 'Core') && token && !ended ?
+                                        <button onClick={() => setShowModal(true)}>End Event</button> : <></>
+                                }
+                            </div>
                         </div>
-                    </div>
+                    </Dialog> :
 
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                        <div className={styles.imageDiv} style={{ flex: '1' }}>
-                            <Image
-                                src={imageUrl}
-                                alt={`${title} event poster`}
-                                width={250}
-                                height={250}
-                            />
-                        </div>
-                        <div className={styles.text} style={{ flex: '1.5' }}>
-                            <div className={styles.flexElements}>
-                                <AcmEventHeads teamTitle={"Contributing Heads"} pills={pillsContributor} setPills={setPillsContributor} setEmptyError={setContributorsEmptyError} />
-                                <AcmEventHeads teamTitle={"Publicity Heads"} pills={pillsPublicity} setPills={setPillsPublicity} setEmptyError={setPublicityEmptyError} />
+                    <Dialog
+                        fullWidth={true}
+                        maxWidth={'md'}
+                        open={true}
+                        sx={{padding: "0", margin: "0", backdropFilter: "blur(5px)"}}
+                        PaperProps={{sx: {borderRadius: "10px"}}}
+                    >
+                        <div className={styles.modal}>
+                            <div className={styles.modalHeading}>
+                                <h2>{title}</h2>
+                                <div className={styles.closeIcon} onClick={handleClose}>
+                                    <RxCross2 size={25} color={Common.primaryColor}/>
+                                </div>
                             </div>
-                            <div className={styles.flexElements}>
 
-                                <form>
-                                    <div className={styles.resetDiv}>
-                                        <div style={{flex: 1}}>
-                                            <label className={styles.uploadFileLabel} htmlFor="uploadFile">Choose .csv file</label>
-                                            <input
-                                                type={"file"}
-                                                name={"file"}
-                                                accept={".csv"}
-                                                onChange={handleCSVUpload}
-                                            />
-                                        </div>
+                            <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                                <div className={styles.imageDiv} style={{flex: '1'}}>
+                                    <Image
+                                        src={imageUrl}
+                                        alt={`${title} event poster`}
+                                        width={250}
+                                        height={250}
+                                    />
+                                </div>
+                                <div className={styles.text} style={{flex: '1.5'}}>
+                                    <div className={styles.flexElements}>
+                                        <AcmEventHeads teamTitle={"Contributing Heads"} pills={pillsContributor}
+                                                       setPills={setPillsContributor}
+                                                       setEmptyError={setContributorsEmptyError}/>
+                                        <AcmEventHeads teamTitle={"Publicity Heads"} pills={pillsPublicity}
+                                                       setPills={setPillsPublicity}
+                                                       setEmptyError={setPublicityEmptyError}/>
+                                    </div>
+                                    <div className={styles.flexElements}>
 
-                                        <input
-                                            type={"reset"}
-                                            value="Clear"
-                                            onClick={() => {
-                                                setParticipantsList([])
-                                                setReadCsvError("");
-                                            }}
-                                        />
+                                        <form>
+                                            <div className={styles.resetDiv}>
+                                                <div style={{flex: 1}}>
+                                                    <label className={styles.uploadFileLabel} htmlFor="uploadFile">Choose
+                                                        .csv file</label>
+                                                    <input
+                                                        type={"file"}
+                                                        name={"file"}
+                                                        accept={".csv"}
+                                                        onChange={handleCSVUpload}
+                                                    />
+                                                </div>
+
+                                                <input
+                                                    type={"reset"}
+                                                    value="Clear"
+                                                    onClick={() => {
+                                                        setParticipantsList([])
+                                                        setReadCsvError("");
+                                                    }}
+                                                />
+                                            </div>
+                                        </form>
+                                        <TextField style={{margin: "10px", width: "90%"}} label={"Contributor Xp"}
+                                                   variant={"outlined"} value={contributorXp}
+                                                   onChange={handleContributorXpChange} type={'number'}></TextField>
+                                    </div>
+                                    <div className={styles.flexElements}>
+                                        <TextField style={{margin: "10px", width: "90%"}} label={"Publicity Xp"}
+                                                   variant={"outlined"} value={publicityXp}
+                                                   onChange={handlePublicityXpChange} type={'number'}></TextField>
+                                        <TextField style={{margin: "10px", width: "90%"}} label={"Participant Xp"}
+                                                   variant={"outlined"} value={participantXp}
+                                                   onChange={handleParticipantXpChange} type={'number'}></TextField>
                                     </div>
-                                </form>
-                                <TextField style={{ margin: "10px", width: "90%" }} label={"Contributor Xp"} variant={"outlined"} value={contributorXp} onChange={handleContributorXpChange} type={'number'} ></TextField>
+                                    {
+                                        participantsEmptyError &&
+                                        <p style={{color: "red"}}>- Please upload a csv containing participants emails.
+                                            Make sure there is at least 1 participant and the column name for email addresses contains &quot;mail&quot; as a substring</p>
+                                    }
+                                    {
+                                        publicityEmptyError &&
+                                        <p style={{color: "red"}}>- Please add at least 1 Publicity Head</p>
+                                    }
+                                    {
+                                        contributorsEmptyError &&
+                                        <p style={{color: "red"}}>- Please add at least 1 Contributor Head</p>
+                                    }
+                                    {
+                                        readCsvError.length > 0 && <p style={{color: "red"}}>- {readCsvError}</p>
+                                    }
+                                </div>
                             </div>
-                            <div className={styles.flexElements}>
-                                <TextField style={{ margin: "10px", width: "90%" }} label={"Publicity Xp"} variant={"outlined"} value={publicityXp} onChange={handlePublicityXpChange} type={'number'} ></TextField>
-                                <TextField style={{ margin: "10px", width: "90%" }} label={"Participant Xp"} variant={"outlined"} value={participantXp} onChange={handleParticipantXpChange} type={'number'} ></TextField>
+                            <div style={{
+                                width: "100%",
+                                textAlign: "right"
+                            }}>
+                                <button
+                                    onClick={handleEndEvent}
+                                    color="warning"
+                                    disabled={loading}
+                                    style={{margin: '10px', marginBottom: '20px'}}
+                                >
+                                    {loading ? "Loading..." : "End Event"}
+                                </button>
                             </div>
-                            {
-                                participantsEmptyError && <p style={{ color: "red" }}>- Please upload a csv containing participants emails. Make sure there is at least 1 participant and the column name for email addresses contains &quot;mail&quot; as a substring</p>
-                            }
-                            {
-                                publicityEmptyError && <p style={{ color: "red" }}>- Please add at least 1 Publicity Head</p>
-                            }
-                            {
-                                contributorsEmptyError && <p style={{ color: "red" }}>- Please add at least 1 Contributor Head</p>
-                            }
-                            {
-                                readCsvError.length > 0 && <p style={{ color: "red" }}>- {readCsvError}</p>
-                            }
                         </div>
-                    </div>
-                    <div style={{
-                        width:"100%",
-                        textAlign:"right"
-                    }}>
-                        <Button
-                            onClick={handleEndEvent}
-                            variant="outlined"
-                            color="warning"
-                            disabled={loading}
-                            style={{ margin: '10px', marginBottom: '20px' }}
-                        >
-                            {loading ? "Loading..." : "End Event"}
-                        </Button>
-                    </div>
-                </div>
-                <Snackbar
-                    open={showSnackBar}
-                    autoHideDuration={2000}
+                    </Dialog>
+            )}
+            <Snackbar
+                open={showSnackBar}
+                autoHideDuration={2000}
+                onClose={handleClose}
+            >
+                <Alert
                     onClose={handleClose}
+                    severity={snackBarError.length ? "error" : "success"}
+                    sx={{width: "100%"}}
                 >
-                    <Alert
-                        onClose={handleClose}
-                        severity={snackBarError.length ? "error" : "success"}
-                        sx={{ width: "100%" }}
-                    >
-                        {snackBarError.length ? snackBarError : "Event ended successfully"}
-                    </Alert>
-                </Snackbar>
-            </Dialog>
+                    {snackBarError.length ? snackBarError : "Event ended successfully"}
+                </Alert>
+            </Snackbar>
+        </>
+
     )
 }
 
diff --git a/styles/components/AcmEventHeads.module.scss b/styles/components/AcmEventHeads.module.scss
index 8eb1a615..e0462c43 100644
--- a/styles/components/AcmEventHeads.module.scss
+++ b/styles/components/AcmEventHeads.module.scss
@@ -39,22 +39,3 @@
     border: none;
     outline:none;
 }
-.pill {
-    background-color: #f6fafd;
-    padding: 10px;
-    margin: 0;
-    cursor: pointer;
-    p {
-        color: grey;
-        font-size: small;
-        overflow: clip;
-        margin: 0;
-    }
-}
-.pill:Hover{
-    background-color: #0a69da;
-    color: white;
-    p {
-        color: white
-    }
-}
\ No newline at end of file
diff --git a/styles/components/EventPopup.module.scss b/styles/components/EventPopup.module.scss
index 5b5b5e5c..726f72e4 100644
--- a/styles/components/EventPopup.module.scss
+++ b/styles/components/EventPopup.module.scss
@@ -5,6 +5,7 @@
     padding: 10px;
     border-radius: 1rem;
     font-family: 'Josefin_Sans';
+    min-height: 350px;
 
     .content {
         word-wrap: break-word;  
@@ -124,6 +125,12 @@
             transition: all 0.5s;
         }
     }
+    button:disabled,
+    button[disabled]{
+        border: 1px solid #999999;
+        background-color: #cccccc;
+        color: #666666;
+    }
 }
 
 @media screen and (max-width: $tablet-breakpoint) {
diff --git a/styles/components/Loader.module.scss b/styles/components/Loader.module.scss
new file mode 100644
index 00000000..aaa91c97
--- /dev/null
+++ b/styles/components/Loader.module.scss
@@ -0,0 +1,113 @@
+.profile-main-loader{
+  left: 50% !important;
+  margin-left:-100px;
+  position: fixed !important;
+  top: 50% !important;
+  margin-top: -100px;
+  width: 35px;
+  z-index: 9000 !important;
+}
+
+.loader {
+  position: relative;
+  margin: 0px auto;
+  width: 600%;
+  height: 600%;
+}
+.profile-main-loader .loader:before {
+  content: '';
+  display: block;
+  padding-top: 100%;
+}
+
+.circular-loader {
+  -webkit-animation: rotate 2s linear infinite;
+  animation: rotate 2s linear infinite;
+  height: 100%;
+  -webkit-transform-origin: center center;
+  -ms-transform-origin: center center;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: auto;
+}
+
+.loader-path {
+  stroke-dasharray: 150,200;
+  stroke-dashoffset: -10;
+  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  stroke-linecap: round;
+}
+
+@-webkit-keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes dash {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -124;
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -124;
+  }
+}
+@-webkit-keyframes color {
+  0% {
+    stroke: #0075FF;
+  }
+  40% {
+    stroke: #0075FF;
+  }
+  66% {
+    stroke: #0075FF;
+  }
+  80%, 90% {
+    stroke: #0075FF;
+  }
+}
+@keyframes color {
+  0% {
+    stroke: #0075FF;
+  }
+  40% {
+    stroke: #0075FF;
+  }
+  66% {
+    stroke: #0075FF;
+  }
+  80%, 90% {
+    stroke: #0075FF;
+  }
+}