diff --git a/frontend/src/components/ActionConfirmation.tsx b/frontend/src/components/ActionConfirmation.tsx
index fd066ea8..872841c9 100644
--- a/frontend/src/components/ActionConfirmation.tsx
+++ b/frontend/src/components/ActionConfirmation.tsx
@@ -64,11 +64,11 @@ import { IoIosWarning } from "react-icons/io";
 
           {/* Buttons */}
           <div className="flex w-full justify-between ">
-            <Button text="No, cancel" onClick={onCloseDelete} className=" text-red border-red hover:border-red hover:bg-red-light active:bg-red" />
+            <Button text="No, cancel" onClick={onCloseDelete} className=" text-white bg-red hover:border-red hover:text-red hover:bg-white active:bg-red" />
             <Button text="Yes, confirm" onClick={() => {
                 onConfirmDelete();
                 onCloseDelete();
-              }} className="border-grey-500" />
+              }} className="border-grey-500 hover:text-primary-900" />
           </div>
 
           </div>
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index dc5a300c..5d073dd6 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -31,27 +31,27 @@ export default function Button({
       className={`
         px-4 py-2 rounded-3xl font-medium text-black border-2 
       active:bg-primary-900 active:border-primary-900 active:text-white
-        h-fit flex-grow-0 items-center justify-center     
+        h-fit flex-grow-0 items-center justify-center hover:border-primary-900    
         transition-opacity flex whitespace-nowrap
         ${className} ${
-          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-90"
+          disabled ? "cursor-not-allowed opacity-50" : "hover:opacity-85"
         }
       `}
     >
       {logo && logoPosition === "left" && (
-        <span className="mr-2">
-          <FontAwesomeIcon icon={logo} className="" />
+        <span className="mr-2 flex items-center justify-center">
+          <FontAwesomeIcon icon={logo} className="w-3 h-3 xl:w-4 xl:h-4" />
         </span>
       )}
       {text}
       {logo && logoPosition === "right" && (
-        <span className="ml-2">
-          <FontAwesomeIcon icon={logo} className="" />
+        <span className="ml-2 flex items-center justify-center">
+          <FontAwesomeIcon icon={logo} className="w-3 h-3 lg:w-4 lg:h-4" />
         </span>
       )}
       {logo && logoPosition === "center" && (
-        <span className="">
-          <FontAwesomeIcon icon={logo} className="" />
+        <span className="flex items-center justify-center">
+          <FontAwesomeIcon icon={logo} className="w-3 h-3 lg:w-4 lg:h-4" />
         </span>
       )}
     </button>
diff --git a/frontend/src/components/InputField.tsx b/frontend/src/components/InputField.tsx
index 4f850af5..71b5e287 100644
--- a/frontend/src/components/InputField.tsx
+++ b/frontend/src/components/InputField.tsx
@@ -21,9 +21,9 @@ export default function InputField({
 }: InputFieldProps) {
   return (
     <div className="w-full">
-      <label htmlFor={id} className="block text-left font-semibold text-sm lg:text-base">
+      <label htmlFor={id} className="block text-left w-fit font-semibold text-sm lg:text-base">
         {label}
-        {required && <span className="text-red">*</span>}
+        {required && <span className="text-red ml-1">*</span>}
       </label>
       <div className="mt-2 flex items-center rounded-md">
         <input
diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
index e6b694f1..443003ca 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -50,10 +50,11 @@ function MainPage() {
   const [openModal, setOpenModal] = useState(false);
 
   const location = useLocation();
+  const mainContainer = document.getElementsByClassName('main-container');
 
-  // Clears all store filters when page changes
   useEffect(() => {
     clearAllFilters();
+    mainContainer[0].scrollTo(0, 0);
   }, [location]);
 
   return (
@@ -61,7 +62,7 @@ function MainPage() {
       <div>
         <NavBar />
       </div>
-      <div className="px-6 lg:px-10 pt-8 w-full h-screen overflow-y-auto">
+      <div className="main-container px-6 lg:px-10 pt-8 w-full h-screen overflow-y-auto">
         <div className="">
           <div className="bell-container flex justify-end w-full">
             <BellButton setOpenModal={setOpenModal} openModal={openModal} />
diff --git a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
index f03cec25..ec5825dc 100644
--- a/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashAddRevenue.tsx
@@ -299,7 +299,7 @@ export default function CashAddRevenue() {
         text="Add Revenue Source"
         onClick={handleSubmit}
         disabled={isSubmitting}
-        className="bg-green text-white mt-2 text-sm lg:text-base"
+        className="bg-green hover:!border-green text-white mt-2 text-sm lg:text-base"
       />
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
index 88b37bd9..63efe2b0 100644
--- a/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashCategoryDropdown.tsx
@@ -28,23 +28,41 @@ export default function CashCategoryDropdown({
       >
         {name}
       </label>
-      <div className="mt-2 flex items-center rounded-md ">
-        <select
-          id={generatedId}
-          value={value}
-          onChange={onChange}
-          className={`block w-full rounded-md py-2.5 pl-4 pr-3 text-sm lg:text-base border-2 placeholder:text-grey-500 h-[2.71rem] lg:h-[2.95rem] ${
-            error ? "border-red bg-red-lightest" : "border-grey-500 bg-grey-100"}
-            ${!value && "text-grey-700"}`}
-        >
-          <option value="" disabled hidden>{"Select a "}{name.toLowerCase()}</option>
-          {Object.values(type).map((r) => (
-            <option key={r} value={r}>
-              {r}
-            </option>
-          ))}
-        </select>
+      <div className="mt-2 flex items-center rounded-md relative">
+          <select
+            id={generatedId}
+            value={value}
+            onChange={onChange}
+            className={`appearance-none block w-full rounded-md py-2.5 pl-4 pr-10 text-sm lg:text-base border-2 placeholder:text-grey-500 h-[2.71rem] lg:h-[2.95rem] focus:outline-none focus:ring-0 focus:ring-offset-0 focus:border-primary-900 ${
+              error
+                ? "border-red bg-red-lightest"
+                : "border-grey-500 bg-grey-100"
+            }`}
+          >
+            <option value="">{"Select a "}{name.toLowerCase()}</option>
+            {Object.values(type).map((r) => (
+              <option key={r} value={r}>
+                {r}
+              </option>
+            ))}
+          </select>
+
+          {/* Custom dropdown arrow */}
+          <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center">
+            <svg
+              className="h-5 w-5 text-grey-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
       </div>
-    </div>
   );
 }
diff --git a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
index 9b514aeb..19e80957 100644
--- a/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashEditLineItem.tsx
@@ -53,7 +53,7 @@ export default function CashEditLineItem({
               logo={faTrash}
               logoPosition="right"
               onClick={() => setShowDeleteModal(true)}
-              className="bg-red-light text-red text-sm lg:text-base"
+              className="bg-red-light text-red hover:!border-red text-sm lg:text-base"
             />
           </div>
         </div>
@@ -68,7 +68,7 @@ export default function CashEditLineItem({
         title={`Delete Cashflow Item`}
         subtitle={"Are you sure you want to delete"}
         boldSubtitle={sourceName}
-        warningMessage="By deleting this item, it won't be available in the system anymore."
+        warningMessage="If you delete this item, it will be permanently removed from the system."
       />
     </div>
   );
diff --git a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
index 7dc46516..296a3307 100644
--- a/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
+++ b/frontend/src/main-page/cash-flow/components/CashSourceList.tsx
@@ -31,7 +31,7 @@ export default function CashSourceList({ type, lineItems }: SourceProps) {
         {" Sources"}
       </div>
       {/* map over list of source and put casheditlineitem for each */}
-      <div className="flex flex-col gap-2 h-[30rem] overflow-y-auto pr-1">
+      <div className="flex flex-col gap-2 h-[38rem] overflow-y-auto pr-1">
         {lineItems.map((item) => (
           <div key={item.name}>
             <CashEditLineItem
diff --git a/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx b/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx
index 291cc4c6..453f7064 100644
--- a/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx
+++ b/frontend/src/main-page/dashboard/components/BarYearGrantStatus.tsx
@@ -128,6 +128,7 @@ const BarYearGrantStatus = observer(
                 border: "1px solid lightgray",
                 boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
               }}
+              cursor={{ fill: "rgba(0,0,0,0.1)" }}
               formatter={(value: number) =>
                 checked ? `$${value.toLocaleString()}` : `${value}`
               }
diff --git a/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx b/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx
index a7af8e0f..e0d84d8b 100644
--- a/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx
+++ b/frontend/src/main-page/dashboard/components/GanttYearGrantTimeline.tsx
@@ -152,7 +152,7 @@ export const GanttYearGrantTimeline = observer(
             : ""}
           {recentYear}
         </div>
-        <div className="w-full h-96 max-w-screen relative">
+        <div className="w-full h-[30rem] max-w-screen relative">
           <Scheduler
             data={filteredSchedulerData}
             isLoading={false}
diff --git a/frontend/src/main-page/dashboard/components/StackedBarMoneyReceived.tsx b/frontend/src/main-page/dashboard/components/StackedBarMoneyReceived.tsx
index 40575882..d9e2c73c 100644
--- a/frontend/src/main-page/dashboard/components/StackedBarMoneyReceived.tsx
+++ b/frontend/src/main-page/dashboard/components/StackedBarMoneyReceived.tsx
@@ -142,6 +142,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => {
               border: "1px solid lightgray",
               boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
             }}
+            cursor={{ fill: "rgba(0,0,0,0.1)" }}
             formatter={(value: number) => `$${value.toLocaleString()}`}
           />
         </BarChart>
diff --git a/frontend/src/main-page/dashboard/styles/Dashboard.css b/frontend/src/main-page/dashboard/styles/Dashboard.css
index 016d9f6d..fbe56795 100644
--- a/frontend/src/main-page/dashboard/styles/Dashboard.css
+++ b/frontend/src/main-page/dashboard/styles/Dashboard.css
@@ -8,40 +8,6 @@ body {
   box-sizing: border-box;
 }
 
-/* Hide the default checkbox */
-input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none; /* For Safari */
-  margin: 0; /* Remove default margin */
-  /* Additional styling for the custom checkbox container */
-  width: 1.2em;
-  height: 1.2em;
-  border: 2px solid lightgray;
-  border-radius: 4px;
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-}
-
-/* Style the custom checkmark using a pseudo-element */
-input[type="checkbox"]::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  width: 0.4em;
-  height: 0.8em;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  display: none; /* Hidden by default */
-}
-
-input[type="checkbox"]:checked::before {
-  display: block; /* Show the checkmark */
-  border-color: black;
-}
-
 /* Main container styling */
 .dashboard-page {
   display: flex;
diff --git a/frontend/src/main-page/grants/edit-grant/EditGrant.tsx b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx
index 8a0dfc07..603ae756 100644
--- a/frontend/src/main-page/grants/edit-grant/EditGrant.tsx
+++ b/frontend/src/main-page/grants/edit-grant/EditGrant.tsx
@@ -198,7 +198,7 @@ const EditGrant: React.FC<{
           {/* Divider */}
           {grantToEdit && (<div>
           <hr className="border-grey-400 border-t-2 rounded-full" />
-          <Button text="Delete Grant" logo={faTrash} logoPosition="right" className="w-fit mt-6 ml-auto text-red bg-red-light" onClick={() => setShowDeleteModal(true)}/>
+          <Button text="Delete Grant" logo={faTrash} logoPosition="right" className="w-fit mt-6 ml-auto text-red hover:border-red bg-red-light" onClick={() => setShowDeleteModal(true)}/>
           <ActionConfirmation
                       isOpen={showDeleteModal}
                       onCloseDelete={() => setShowDeleteModal(false)}
@@ -208,7 +208,7 @@ const EditGrant: React.FC<{
                       title="Delete Grant"
                       subtitle={"Are you sure you want to delete"}
                       boldSubtitle={form.organization}
-                      warningMessage="By deleting this grant, they won't be available in the system anymore."
+                      warningMessage="If you delete this grant, it will be permanently removed from the system."
                     />
           </div>)}
         </div>
diff --git a/frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx b/frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx
index b74830ba..5c312e5f 100644
--- a/frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx
+++ b/frontend/src/main-page/grants/edit-grant/components/AddContactPopup.tsx
@@ -88,7 +88,7 @@ const AddContactPopup = observer(
 
           {/* Contact Type Selector */}
           <div className="flex gap-2">
-            {(["BCAN", "Granter"] as ContactType[]).map((t) => (
+            {(["BCAN", "Granter"] as ContactType[]).filter((t): t is ContactType => form.bcanPocEmail ? t === "Granter" : form.grantProviderPocEmail ? t === "BCAN" : true).map((t) => (
               <button
                 key={t}
                 onClick={() => {
@@ -102,7 +102,9 @@ const AddContactPopup = observer(
                       ? t === "BCAN"
                         ? "bg-primary-900 text-white"
                         : "bg-secondary-500 text-white"
-                      : "bg-white border-grey-400"
+                      : t !== "BCAN"
+                      ? "hover:border-secondary-500 bg-white border-grey-400"
+                      : "hover:border-primary-900 bg-white border-grey-400"
                   }`}
               >
                 {t}
diff --git a/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx b/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx
index 3e3360c7..eb4b0005 100644
--- a/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx
+++ b/frontend/src/main-page/grants/edit-grant/components/EditGrantInfo.tsx
@@ -67,7 +67,7 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
                 logo={faCheckSquare}
                 logoPosition="left"
                 text="Yes"
-                className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-green active:bg-white ${form.doesBcanQualify === "yes" ? "text-green border-green" : "border-grey-300 text-grey-700"}`}
+                className={`text-gray-700 px-2 py-1 w-20 text-sm border-2  hover:!border-green active:bg-green ${form.doesBcanQualify === "yes" ? "text-green border-green" : "border-grey-300 text-grey-700"}`}
                 onClick={() =>
                   dispatch({
                     type: "SET_FIELD",
@@ -80,7 +80,7 @@ export default function EditGrantInfo({ form, dispatch }: EditGrantProps) {
                 logo={faSquareXmark}
                 logoPosition="left"
                 text="No"
-                className={`text-gray-700 px-3 py-1 text-sm border-2 hover:border-red active:bg-white ${form.doesBcanQualify === "no" ? "text-red border-red" : "border-grey-300 text-grey-700"}`}
+                className={`text-gray-700 px-2 py-1 w-20 text-sm border-2 hover:!border-red active:bg-red ${form.doesBcanQualify === "no" ? "text-red border-red" : "border-grey-300 text-grey-700"}`}
                 onClick={() =>
                   dispatch({
                     type: "SET_FIELD",
diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
index 1858c973..a3837fbb 100644
--- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
+++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
@@ -165,9 +165,9 @@ const FilterBar: React.FC = observer(() => {
   
   
   const activeButtonClass =
-    "border-2 border-primary-900 text-primary-900 active:!border-primary-900 active:!text-primary-900 focus:!border-primary-900 focus:!text-primary-900 focus:outline-none focus-visible:outline-none";
+    "border-2 border-primary-900 text-primary-900 active:!border-primary-900 active:!text-white focus:!border-primary-900 focus:!text-primary-900 focus:outline-none focus-visible:outline-none";
   const inactiveButtonClass =
-    "border-2 border-grey-500 text-grey-600 active:!border-grey-500 active:!text-grey-600 focus:!border-grey-500 focus:!text-grey-600 focus:outline-none focus-visible:outline-none";
+    "border-2 border-grey-500 text-grey-600 active:!border-primary-900 active:!text-white focus:!border-grey-500 focus:!text-grey-600 focus:outline-none focus-visible:outline-none";
 
   return (
     <div className="relative w-full">
@@ -175,7 +175,7 @@ const FilterBar: React.FC = observer(() => {
         <Button
           text="My Grants"
           onClick={handleMyGrantsClick}
-          className={`bg-white text-sm lg:text-base whitespace-nowrap border-b-4 ${
+          className={`bg-white text-sm lg:text-base whitespace-nowrap ${
             emailFilter ? activeButtonClass : inactiveButtonClass
           }`}
         />
diff --git a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
index ab753657..dede524a 100644
--- a/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
+++ b/frontend/src/main-page/grants/filter-bar/components/FilterCard.tsx
@@ -178,11 +178,9 @@ export default function FilterCard({
 		<div className="flex flex-col gap-2">
 			<div className="text-sm font-semibold flex justify-between items-center">
 				<span>Direction</span>
-				<Button
-					text="Clear all"
-					onClick={handleClearAll}
-					className="text-xs font-semibold text-secondary-400 border-0 hover:text-secondary-400 hover:bg-opacity-0 hover:border hover:border-white"
-				/>
+				<button onClick={handleClearAll} className="text-xs font-semibold text-secondary-400 border-0 hover:text-secondary-400 hover:bg-opacity-0 focus:outline-none active:text-secondary">
+					{"Clear all"}
+				</button>
 			</div>
 			<div className="flex gap-2 flex-wrap">
 				<Button
@@ -190,8 +188,8 @@ export default function FilterCard({
 					logoPosition="left"
 					text="Increasing"
 					onClick={() => {
-						setDirection("increasing");
-						onDirectionChange("increasing");
+						setDirection(direction =="increasing" ? null : "increasing");
+						onDirectionChange(direction =="increasing" ? null : "increasing");
 					}}
 					className={
 						direction === "increasing"
@@ -205,8 +203,8 @@ export default function FilterCard({
 					logoPosition="left"
 					text="Decreasing"
 					onClick={() => {
-						setDirection("decreasing");
-						onDirectionChange("decreasing");
+						setDirection(direction =="decreasing" ? null : "decreasing");
+						onDirectionChange(direction =="decreasing" ? null : "decreasing");
 					}}
 					className={
 						direction === "decreasing"
diff --git a/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx b/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx
index 27456bc9..8e7e8907 100644
--- a/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx
+++ b/frontend/src/main-page/grants/filter-bar/components/StatusDropdown.tsx
@@ -31,6 +31,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = observer(({ selected, onSe
               aria-label={`Filter by ${String(status)} status`}
               className="cursor-pointer w-4 h-4 flex-shrink-0"
             />
+            
             <span
               className="px-3 py-1 rounded-full text-sm font-medium"
               style={{
@@ -41,6 +42,7 @@ const StatusDropdown: React.FC<StatusDropdownProps> = observer(({ selected, onSe
               {status}
             </span>
           </label>
+          
         ))}
       </div>
     </div>
diff --git a/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx b/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx
index 48d57ef0..61c53c3a 100644
--- a/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx
+++ b/frontend/src/main-page/grants/grant-view/components/StatusIndicator.tsx
@@ -19,7 +19,7 @@ const StatusIndicator: React.FC<StatusIndicatorProps> = ({ curStatus, onClick, a
 
   return (
     <button
-      className="inline-flex w-fit cursor-default flex-none items-center rounded-full px-3 py-1 border-grey-300 border-2 text-gray-700 hover:border-primary-900 text-sm lg:text-base"
+      className="inline-flex w-fit cursor-pointer flex-none items-center rounded-full px-3 py-1 border-grey-300 border-2 text-gray-700 hover:border-grey-500 text-sm lg:text-base"
       style={active !== false ? { color: darkColor, backgroundColor: lightColor, borderColor: lightColor } : {}}
       onClick={onClick}
 
diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx
index 73c32c0b..85957248 100644
--- a/frontend/src/main-page/notifications/NotificationPopup.tsx
+++ b/frontend/src/main-page/notifications/NotificationPopup.tsx
@@ -66,7 +66,7 @@ const NotificationPopup: React.FC<NotificationPopupProps> = observer(({
 
     return createPortal(
     <div className="fixed inset-0 z-[999] bg-black bg-opacity-30" onClick={() => setOpenModal(false)}>
-        <div className="absolute right-24 top-10 w-[26rem] bg-white rounded shadow-lg border border-grey-200 z-[1000]" role="dialog" aria-label="Notifications" onClick={e => e.stopPropagation()}>
+        <div className="absolute end-0 right-6 lg:right-10 top-[4.5rem] w-[26rem] bg-white rounded shadow-lg border border-grey-200 z-[1000] p-1" role="dialog" aria-label="Notifications" onClick={e => e.stopPropagation()}>
             <div className="flex justify-between items-center px-4 py-3">
                 <h3 className="text-lg font-medium text-black m-0">Your Notifications</h3>
                 <div className="flex items-center gap-2">
@@ -95,7 +95,7 @@ const NotificationPopup: React.FC<NotificationPopupProps> = observer(({
                         />
                     ))
                 ) : (
-                    <p className="pl-2 pb-2 text-sm text-grey-500">No new notifications</p>
+                    <p className="pl-4 pb-4 text-sm text-grey-500">No new notifications</p>
                 )}
             </div>
         </div>
diff --git a/frontend/src/main-page/users/components/UserMenu.tsx b/frontend/src/main-page/users/components/UserMenu.tsx
index ba2b95f3..210f0773 100644
--- a/frontend/src/main-page/users/components/UserMenu.tsx
+++ b/frontend/src/main-page/users/components/UserMenu.tsx
@@ -40,7 +40,7 @@ const UserMenu = ({ user }: UserMenuProps) => {
         title="Delete User"
         subtitle="Are you sure you want to delete"
         boldSubtitle={user.email}
-        warningMessage="By deleting this user, they won't be available in the system anymore."
+        warningMessage="If you delete this user, they will be permanently removed from the system."
       />
       <div className="flex items-center justify-start gap-2">
         <div className="relative">
diff --git a/frontend/src/main-page/users/components/UserRow.tsx b/frontend/src/main-page/users/components/UserRow.tsx
index c25e85cd..4226dab0 100644
--- a/frontend/src/main-page/users/components/UserRow.tsx
+++ b/frontend/src/main-page/users/components/UserRow.tsx
@@ -11,18 +11,18 @@ const UserRow = ({ user, action }: UserRowProps) => {
   return (
     <div
       key={user.email}
-      className="grid grid-cols-2 lg:grid-cols-[30%_35%_25%_10%] cols gap-2 lg:gap-0 text-sm lg:text-base border-b-2 border-grey-150 py-4 px-8 items-center"
+      className="grid grid-cols-2 xl:grid-cols-[30%_35%_25%_10%] cols gap-2 lg:gap-0 text-sm lg:text-base border-b-2 border-grey-150 py-4 px-8 items-center"
     >
-      <div className="col-span-1 flex items-center font-medium">
+      <div className="col-span-1 flex items-center font-medium truncate mr-2">
         <Avatar
           src={user.profilePicUrl}
           alt="Profile"
-          className="w-12 h-12 object-cover mr-4 rounded-full hidden lg:block"
+          className="w-12 h-12 object-cover mr-4 rounded-full hidden xl:block"
           fallbackSrc={logo}
         />
         {user.firstName}&nbsp;{user.lastName}
       </div>
-      <div className="col-span-1 py-1">{user.email}</div>
+      <div className="col-span-1 py-1 truncate mr-2">{user.email}</div>
       <div className="col-span-1 py-1">
         <UserPositionCard position={user.position} />
       </div>
diff --git a/frontend/src/sign-up/PasswordField.tsx b/frontend/src/sign-up/PasswordField.tsx
index c3dfb499..710108a9 100644
--- a/frontend/src/sign-up/PasswordField.tsx
+++ b/frontend/src/sign-up/PasswordField.tsx
@@ -71,7 +71,7 @@ export default function PasswordField({
     <div className="w-full">
       <label htmlFor={id} className="block text-left font-semibold text-black">
         {label}
-        {required && <span className="text-red">*</span>}
+        {required && <span className="text-red ml-1">*</span>}
       </label>
       <div className="relative mt-2 flex items-center rounded-md">
         <input
diff --git a/frontend/src/sign-up/Register.tsx b/frontend/src/sign-up/Register.tsx
index 67de4889..4576d757 100644
--- a/frontend/src/sign-up/Register.tsx
+++ b/frontend/src/sign-up/Register.tsx
@@ -15,6 +15,7 @@ const Register = observer(() => {
   const navigate = useNavigate();
   const { register } = useAuthContext();
 
+  const [submitting, setSubmitting] = useState(false);
   const [values, setValues] = useState({
     firstName: "",
     lastName: "",
@@ -36,6 +37,7 @@ const Register = observer(() => {
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
+    setSubmitting(true);
     e.preventDefault();
 
     if (!EMAIL_REGEX.test(values.email)) {
@@ -77,6 +79,7 @@ const Register = observer(() => {
         item: "registration",
       });
     }
+    setSubmitting(false);
   };
 
   return (
@@ -96,6 +99,7 @@ const Register = observer(() => {
             values.passwordRe !== ""
           }
           passwordsMatch={values.password === values.passwordRe}
+          submitting={submitting}
         />
       </div>
       <div className="w-1/4 lg:w-1/2  p-8">
diff --git a/frontend/src/sign-up/SignUpForm.tsx b/frontend/src/sign-up/SignUpForm.tsx
index 8f5266fc..f052325e 100644
--- a/frontend/src/sign-up/SignUpForm.tsx
+++ b/frontend/src/sign-up/SignUpForm.tsx
@@ -16,6 +16,7 @@ export type SignUpFormProps = {
   values: SignUpFormValues;
   onChange: (field: keyof SignUpFormValues, value: string) => void;
   onSubmit: (e: React.FormEvent) => void;
+  submitted?: boolean;
   error?: { state: boolean; message: string; item: string };
   /** When true, Sign Up button uses primary-900 and is clickable; when false, primary-700 and disabled. */
   passwordRequirementsMet?: boolean;
@@ -23,6 +24,8 @@ export type SignUpFormProps = {
   allFieldsFilled?: boolean;
   /** When true, password and re-enter password are exactly the same. */
   passwordsMatch?: boolean;
+  /** When true, form is in the process of being submitted; disables button and shows loading state. */
+  submitting: boolean;
 };
 
 /**
@@ -37,6 +40,7 @@ export default function SignUpForm({
   passwordRequirementsMet = false,
   allFieldsFilled = false,
   passwordsMatch = false,
+  submitting = false,
 }: SignUpFormProps) {
   const hasError = error?.state ?? false;
   const errorItem = error?.item ?? "";
@@ -113,7 +117,7 @@ export default function SignUpForm({
           </div>
         )}
 
-        <SignUpButton disabled={!canSubmit} />
+        <SignUpButton disabled={!canSubmit || submitting} />
         <LoginPrompt />
       </form>
     </div>
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 6bb4e773..51e946ea 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -125,10 +125,6 @@ textarea {
   border-color: var(--color-primary-900);
 }
 
-button:hover {
-  border-color: var(--color-primary-900);
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: var(--color-grey-800);
@@ -148,18 +144,25 @@ input {
 }
 
 input:focus {
-  outline: 2px solid var(--color-primary-900);
+  outline: 0px solid var(--color-primary-900);
   /* outline: transparent; */
+  border: 2px solid var(--color-primary-900);
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+    transition: background-color 0s 600000s, color 0s 600000s !important;
 }
 
 textarea:focus {
-  outline: 2px solid var(--color-primary-900);
+  outline: 0px solid var(--color-primary-900);
   /* outline: transparent; */
+  border: 2px solid var(--color-primary-900);
 }
 
 button:focus,
 button:focus-visible {
-  outline: 1px solid var(--color-primary-700);
+  outline: 0px solid var(--color-primary-700);
 }
 
 input[type="date"]::-webkit-calendar-picker-indicator {
@@ -183,4 +186,34 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-grey-500); 
+}
+
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid theme('colors.grey.500');
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+}
+
+input[type="checkbox"]:checked {
+  background-color: theme('colors.primary.900');
+  border-color: theme('colors.primary.900');
+}
+
+input[type="checkbox"]:checked::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 4px;
+  height: 7px;
+  border-right: 2px solid white;
+  border-bottom: 2px solid white;
 }
\ No newline at end of file