diff --git a/frontend/src/Helper/Generics/GenericCardMenu.tsx b/frontend/src/Helper/Generics/GenericCardMenu.tsx
index 7916ce49..4ff73be1 100644
--- a/frontend/src/Helper/Generics/GenericCardMenu.tsx
+++ b/frontend/src/Helper/Generics/GenericCardMenu.tsx
@@ -4,6 +4,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DefaultValues from '../../Styles/DefaultValues.module.scss'
+import GenericHoverPopover from './GenericHoverPopover';
 
 type Props = {
     handleOpenEdit: () => void;
@@ -24,7 +25,9 @@ export default function GenericCardMenu({ handleOpenDelete, handleOpenEdit }: Pr
 
     return (
         <>
-            <MoreVertIcon onClick={handleClick} fontSize="medium" style={{ cursor: "pointer", color: DefaultValues.secondaryText }} />
+            <GenericHoverPopover tooltipText={"Options"}>
+                <MoreVertIcon onClick={handleClick} fontSize="medium" style={{ cursor: "pointer", color: DefaultValues.secondaryText }} />
+            </GenericHoverPopover>
             <Popover open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', }}>
                 <MenuList>
                     <MenuItem onClick={() => { handleOpenEdit(); handleClose(); }}>
diff --git a/frontend/src/Helper/Generics/GenericHoverPopover.tsx b/frontend/src/Helper/Generics/GenericHoverPopover.tsx
new file mode 100644
index 00000000..02683a19
--- /dev/null
+++ b/frontend/src/Helper/Generics/GenericHoverPopover.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+type Props = {
+    children: React.ReactElement;
+    tooltipText: String;
+}
+
+export default function GenericHoverPopover({children, tooltipText}: Props) {
+
+    const renderTooltip = (props: any) => (
+        <Tooltip id="button-tooltip" {...props}>
+          {tooltipText}
+        </Tooltip>
+      );
+      
+    return (
+        <div>
+            <OverlayTrigger
+                placement="right"
+                delay={{ show: 500, hide: 0 }}
+                overlay={renderTooltip}
+            >
+                {children}
+            </OverlayTrigger>
+        </div>
+
+    )
+}
diff --git a/frontend/src/Helper/Generics/GenericLike.tsx b/frontend/src/Helper/Generics/GenericLike.tsx
index 53d3bde0..4a2f49e2 100644
--- a/frontend/src/Helper/Generics/GenericLike.tsx
+++ b/frontend/src/Helper/Generics/GenericLike.tsx
@@ -13,7 +13,7 @@ type Props = {
     isComment: boolean;
 }
 
-export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUser, isComment}: Props) {
+export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUser, isComment }: Props) {
 
     const [isLiked, setIsLiked] = useState<boolean>(isLikedByLoggedInUser);
     const [currentLikeCount, setCurrentLikeCount] = useState<number>(likeCount);
@@ -26,7 +26,8 @@ export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUse
         setIsRefresh(!isRefresh);
     }
 
-    function handleClick(event: any) {
+    function handleOpen(event: any) {
+        console.log("we here")
         setAnchorEl(event.currentTarget);
     }
 
@@ -36,26 +37,26 @@ export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUse
         // update like state
         setIsLiked(newIsLiked);
     }
-    
-    function updateLikeCount(newCount: number){
+
+    function updateLikeCount(newCount: number) {
         setCurrentLikeCount(newCount);
     }
 
     useEffect(() => {
         async function didUserLikeContent() {
-            
-            const handlerObject: GenericHandlerType = isComment ? 
-            {
-                data: JSON.stringify({ commentID: contentID, uid: currentUid }),
-                methodType: "POST",
-                path: "didUserLikeComment",
-            } 
-            : 
-            {                 
-                data: JSON.stringify({ contentID: contentID, uid: currentUid }),
-                methodType: "POST",
-                path: "didUserLikeContent",
-            }
+
+            const handlerObject: GenericHandlerType = isComment ?
+                {
+                    data: JSON.stringify({ commentID: contentID, uid: currentUid }),
+                    methodType: "POST",
+                    path: "didUserLikeComment",
+                }
+                :
+                {
+                    data: JSON.stringify({ contentID: contentID, uid: currentUid }),
+                    methodType: "POST",
+                    path: "didUserLikeContent",
+                }
 
             try {
                 let answer = (await GenericHandler(handlerObject));
@@ -75,16 +76,16 @@ export default function GenericLike({ contentID, likeCount, isLikedByLoggedInUse
     return (
         <div style={{ cursor: 'pointer', float: "right", display: "flex", marginRight: "1%" }}>
             <p>{currentLikeCount || "0"}</p>
-            {isLiked ? <FavoriteIcon style={{ marginLeft: "2%" }} onClick={handleClick}></FavoriteIcon> : <></>}
-            {!isLiked ? <FavoriteBorderIcon style={{ marginLeft: "2%" }} onClick={handleClick}></FavoriteBorderIcon> : <></>}
+            {isLiked ? <FavoriteIcon style={{ marginLeft: "2%" }} onMouseEnter={handleOpen}></FavoriteIcon> : <></>}
+            {!isLiked ? <FavoriteBorderIcon style={{ marginLeft: "2%" }} onMouseEnter={handleOpen}></FavoriteBorderIcon> : <></>}
             {anchorEl && <GenericLikeMenu
                 anchorEl={anchorEl}
                 closeMenu={closeMenu}
                 contentID={contentID}
                 isComment={isComment}
-                currentUid={currentUid} 
-                likeType={likeType} 
-                refresh={refresh} 
+                currentUid={currentUid}
+                likeType={likeType}
+                refresh={refresh}
                 updateLikeCount={updateLikeCount} />}
         </div>
     );
diff --git a/frontend/src/Helper/Generics/GenericLikeMenu.tsx b/frontend/src/Helper/Generics/GenericLikeMenu.tsx
index 7e0c1178..06e0074b 100644
--- a/frontend/src/Helper/Generics/GenericLikeMenu.tsx
+++ b/frontend/src/Helper/Generics/GenericLikeMenu.tsx
@@ -18,7 +18,7 @@ type Props = {
     isComment: boolean;
 }
 
-export default function GenericLikeMenu({ closeMenu, anchorEl, contentID, currentUid, likeType, refresh, updateLikeCount, isComment}: Props) {
+export default function GenericLikeMenu({ closeMenu, anchorEl, contentID, currentUid, likeType, refresh, updateLikeCount, isComment }: Props) {
     const [alignment, setAlignment] = useState<string>(likeType?.likeType || "");
     const [likeCount, setLikeCount] = useState<number>(0)
     const [likedCount, setLikedCount] = useState<number>(0);
@@ -29,43 +29,43 @@ export default function GenericLikeMenu({ closeMenu, anchorEl, contentID, curren
     const open = Boolean(anchorEl);
     const didMountRef = useRef(false);
 
-    async function createLike(){
+    async function createLike() {
         let likeTypeID = -1;
-        if(alignment === 'thumbs_up'){
+        if (alignment === 'thumbs_up') {
             likeTypeID = 0;
         }
-        else if(alignment === 'music_notes'){
+        else if (alignment === 'music_notes') {
             likeTypeID = 1;
         }
-        else if(alignment === 'celebration'){
+        else if (alignment === 'celebration') {
             likeTypeID = 5;
         }
-        else if(alignment === 'heart'){
+        else if (alignment === 'heart') {
             likeTypeID = 3;
         }
 
-        const handlerObject: GenericHandlerType = isComment ? 
-        {
-            data: JSON.stringify({ 
-                commentID: contentID, 
-                uid: currentUid, 
-                timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
-                likeTypeID: likeTypeID,
-            }),
-            methodType: "POST",
-            path: "createLikeForComment",
-        }
-        :
-        {
-            data: JSON.stringify({ 
-                contentID: contentID, 
-                uid: currentUid, 
-                timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
-                likeTypeID: likeTypeID,
-            }),
-            methodType: "POST",
-            path: "createLikeForContent",
-        }
+        const handlerObject: GenericHandlerType = isComment ?
+            {
+                data: JSON.stringify({
+                    commentID: contentID,
+                    uid: currentUid,
+                    timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
+                    likeTypeID: likeTypeID,
+                }),
+                methodType: "POST",
+                path: "createLikeForComment",
+            }
+            :
+            {
+                data: JSON.stringify({
+                    contentID: contentID,
+                    uid: currentUid,
+                    timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
+                    likeTypeID: likeTypeID,
+                }),
+                methodType: "POST",
+                path: "createLikeForContent",
+            }
 
         try {
             let answer = (await GenericHandler(handlerObject));
@@ -81,45 +81,45 @@ export default function GenericLikeMenu({ closeMenu, anchorEl, contentID, curren
         }
     }
 
-    async function updateLike(){
+    async function updateLike() {
         let likeTypeID = -1;
-        if(alignment === 'thumbs_up'){
+        if (alignment === 'thumbs_up') {
             likeTypeID = 0;
         }
-        else if(alignment === 'music_notes'){
+        else if (alignment === 'music_notes') {
             likeTypeID = 1;
         }
-        else if(alignment === 'celebration'){
+        else if (alignment === 'celebration') {
             likeTypeID = 5;
         }
-        else if(alignment === 'heart'){
+        else if (alignment === 'heart') {
             likeTypeID = 3;
         }
 
-        const handlerObject: GenericHandlerType = isComment ? 
-        {
-            data: JSON.stringify({ 
-                likeID: likeType?.likeID,
-                commentID: contentID, 
-                uid: currentUid, 
-                timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
-                likeTypeID: likeTypeID,
-            }),
-            methodType: "PATCH",
-            path: "updateLike",
-        }
-        : 
-        {
-            data: JSON.stringify({ 
-                likeID: likeType?.likeID,
-                contentID: contentID, 
-                uid: currentUid, 
-                timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
-                likeTypeID: likeTypeID,
-            }),
-            methodType: "PATCH",
-            path: "updateLike",
-        }
+        const handlerObject: GenericHandlerType = isComment ?
+            {
+                data: JSON.stringify({
+                    likeID: likeType?.likeID,
+                    commentID: contentID,
+                    uid: currentUid,
+                    timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
+                    likeTypeID: likeTypeID,
+                }),
+                methodType: "PATCH",
+                path: "updateLike",
+            }
+            :
+            {
+                data: JSON.stringify({
+                    likeID: likeType?.likeID,
+                    contentID: contentID,
+                    uid: currentUid,
+                    timestamp: new Date().toISOString().slice(0, 19).replace('T', ' '),
+                    likeTypeID: likeTypeID,
+                }),
+                methodType: "PATCH",
+                path: "updateLike",
+            }
 
         try {
             let answer = (await GenericHandler(handlerObject));
@@ -134,9 +134,9 @@ export default function GenericLikeMenu({ closeMenu, anchorEl, contentID, curren
         }
     }
 
-    async function deleteLike(){
+    async function deleteLike() {
         const handlerObject: GenericHandlerType = {
-            data: JSON.stringify({ 
+            data: JSON.stringify({
                 likeID: likeType?.likeID,
             }),
             methodType: "DELETE",
@@ -159,18 +159,18 @@ export default function GenericLikeMenu({ closeMenu, anchorEl, contentID, curren
 
     useEffect(() => {
         async function fetchData() {
-            const handlerObject: GenericHandlerType = isComment ? 
-            {
-                data: JSON.stringify({ commentID: contentID}),
-                methodType: "POST",
-                path: "getLikeCountForComment",
-            }
-            :
-            {
-                data: JSON.stringify({ contentID: contentID}),
-                methodType: "POST",
-                path: "getLikeCountForContent",
-            }
+            const handlerObject: GenericHandlerType = isComment ?
+                {
+                    data: JSON.stringify({ commentID: contentID }),
+                    methodType: "POST",
+                    path: "getLikeCountForComment",
+                }
+                :
+                {
+                    data: JSON.stringify({ contentID: contentID }),
+                    methodType: "POST",
+                    path: "getLikeCountForContent",
+                }
 
             try {
                 let answer = (await GenericHandler(handlerObject));
@@ -191,65 +191,78 @@ export default function GenericLikeMenu({ closeMenu, anchorEl, contentID, curren
         }
         fetchData();
     }, [contentID, currentUid, isComment])
-    
+
     useEffect(() => {
-        if(didMountRef.current){
+        if (didMountRef.current) {
             // update
-            if(alignment !== null && likeType?.isLiked){
+            if (alignment !== null && likeType?.isLiked) {
                 updateLike();
             }
             // create
-            else if(alignment !== null && !likeType?.isLiked){
+            else if (alignment !== null && !likeType?.isLiked) {
                 createLike();
             }
             // delete
-            else if(alignment === null && likeType?.isLiked){
+            else if (alignment === null && likeType?.isLiked) {
                 deleteLike();
             }
             handleClose();
         }
 
         // onMount
-        if(!didMountRef.current){
+        if (!didMountRef.current) {
             didMountRef.current = true;
         }
     }, [alignment])
 
     const handleClose = () => {
+        console.log("we handle close");
         (alignment === null || alignment === "") ? closeMenu(false) : closeMenu(true);
     };
 
     const handleChange = (event: any, newAlignment: string) => {
         setAlignment(newAlignment);
-    };    
-
-  return (
-    <>
-    <Popover open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{vertical: 'bottom', horizontal: 'left',}}>
-        <ToggleButtonGroup
-            color="primary"
-            value={alignment}
-            exclusive
-            onChange={handleChange}
+    };
+
+    return (
+        <>
+            <Popover
+                open={open}
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center',
+                }}
+                transformOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }}
             >
-            <ToggleButton value="heart">
-                <p>{lovedCount}</p>
-                <FavoriteIcon/>
-            </ToggleButton>
-            <ToggleButton value="thumbs_up">
-                <p>{likedCount}</p>
-                <ThumbUpIcon/>
-            </ToggleButton>
-            <ToggleButton value="celebration">
-                <p>{celebratedCount}</p>
-                <CelebrationIcon/>
-            </ToggleButton>
-            <ToggleButton value="music_notes">
-                <p>{jammedCount}</p>
-                <MusicNoteIcon/>
-            </ToggleButton>
-        </ToggleButtonGroup>
-    </Popover>
-    </>
-  );
+                <ToggleButtonGroup
+                    onMouseLeave={handleClose}
+                    color="primary"
+                    value={alignment}
+                    exclusive
+                    onChange={handleChange}
+                >
+                    <ToggleButton value="heart">
+                        <p>{lovedCount}</p>
+                        <FavoriteIcon />
+                    </ToggleButton>
+                    <ToggleButton value="thumbs_up">
+                        <p>{likedCount}</p>
+                        <ThumbUpIcon />
+                    </ToggleButton>
+                    <ToggleButton value="celebration">
+                        <p>{celebratedCount}</p>
+                        <CelebrationIcon />
+                    </ToggleButton>
+                    <ToggleButton value="music_notes">
+                        <p>{jammedCount}</p>
+                        <MusicNoteIcon />
+                    </ToggleButton>
+                </ToggleButtonGroup>
+            </Popover>
+        </>
+    );
 }
diff --git a/frontend/src/Pages/Comments/CommentOptionsMenu.tsx b/frontend/src/Pages/Comments/CommentOptionsMenu.tsx
index fd9ef1c8..a8d052eb 100644
--- a/frontend/src/Pages/Comments/CommentOptionsMenu.tsx
+++ b/frontend/src/Pages/Comments/CommentOptionsMenu.tsx
@@ -4,6 +4,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DefaultValues from '../../Styles/DefaultValues.module.scss'
+import GenericHoverPopover from '../../Helper/Generics/GenericHoverPopover';
 
 type Props = {
     handleOpenDelete: () => void;
@@ -24,7 +25,10 @@ export default function CommentOptionsMenu({ handleOpenDelete, handleOpenEdit }:
 
     return (
         <>
-            <MoreVertIcon onClick={handleClick} fontSize="medium" style={{ cursor: "pointer", color: DefaultValues.secondaryText }} />
+
+            <GenericHoverPopover tooltipText={"Options"}>
+                <MoreVertIcon onClick={handleClick} fontSize="medium" style={{ cursor: "pointer", color: DefaultValues.secondaryText }} />
+            </GenericHoverPopover>
             <Popover open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', }}>
                 <MenuList>
                     {handleOpenEdit ?
@@ -34,8 +38,8 @@ export default function CommentOptionsMenu({ handleOpenDelete, handleOpenEdit }:
                             </ListItemIcon>
                             <ListItemText>Edit</ListItemText>
                         </MenuItem>
-                    : 
-                        <></> 
+                        :
+                        <></>
                     }
                     <MenuItem onClick={() => { handleOpenDelete(); handleClose(); }}>
                         <ListItemIcon>
diff --git a/frontend/src/Pages/Home/FilterFeed.tsx b/frontend/src/Pages/Home/FilterFeed.tsx
index ee36ce84..5a381e1e 100644
--- a/frontend/src/Pages/Home/FilterFeed.tsx
+++ b/frontend/src/Pages/Home/FilterFeed.tsx
@@ -3,6 +3,7 @@ import TuneIcon from '@mui/icons-material/Tune';
 import { Checkbox, Container, FormControlLabel, FormGroup, FormLabel, IconButton, Popover } from '@mui/material';
 import GenericTagsPicker from '../../Helper/Generics/GenericTagsPicker';
 import { TagType } from '../../ObjectInterface';
+import GenericHoverPopover from '../../Helper/Generics/GenericHoverPopover';
 
 type Props = {
     updateFilterBy: (newValue: string) => void
@@ -10,7 +11,7 @@ type Props = {
     tags: Array<TagType>;
 }
 
-export default function FilterFeed({ updateFilterBy, updateTags, tags}: Props) {
+export default function FilterFeed({ updateFilterBy, updateTags, tags }: Props) {
 
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -40,11 +41,13 @@ export default function FilterFeed({ updateFilterBy, updateTags, tags}: Props) {
 
     return (
         <div>
-            <IconButton aria-label="filter" sx={{padding: "10%"}} onClick={handleClick}>
-                <TuneIcon fontSize="large" />
-            </IconButton>
+            <GenericHoverPopover tooltipText={"Filter"}>
+                <IconButton aria-label="filter" sx={{ padding: "10%" }} onClick={handleClick}>
+                    <TuneIcon fontSize="large" />
+                </IconButton>
+            </GenericHoverPopover>
             <Popover style={{}} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
-                <Container sx={{ mt: "10%", mb: "10%", borderRadius: "1em", width: "25vw"}}>
+                <Container sx={{ mt: "10%", mb: "10%", borderRadius: "1em", width: "25vw" }}>
                     <FormLabel component="legend">Filter by type</FormLabel>
                     <FormGroup>
                         <FormControlLabel
@@ -73,7 +76,7 @@ export default function FilterFeed({ updateFilterBy, updateTags, tags}: Props) {
                         />
                     </FormGroup>
                     <FormLabel component="legend">Filter by tags</FormLabel>
-                    <GenericTagsPicker updateTags={updateTags} defaultValue={tags}/>
+                    <GenericTagsPicker updateTags={updateTags} defaultValue={tags} />
                 </Container>
             </Popover>
         </div>
diff --git a/frontend/src/Pages/Home/SortFeed.tsx b/frontend/src/Pages/Home/SortFeed.tsx
index bd091e7b..02d80b46 100644
--- a/frontend/src/Pages/Home/SortFeed.tsx
+++ b/frontend/src/Pages/Home/SortFeed.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import SortIcon from '@mui/icons-material/Sort';
 import { IconButton, Popover, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import GenericHoverPopover from '../../Helper/Generics/GenericHoverPopover';
 
 type Props = {
     sortBy: string;
@@ -25,9 +26,11 @@ export default function SortFeed({ sortBy, updateSortBy }: Props) {
 
     return (
         <div>
-            <IconButton aria-label="sort" sx={{padding: "10%"}} onClick={handleClick}>
-                <SortIcon fontSize='large' />
-            </IconButton>
+            <GenericHoverPopover tooltipText={"Sort"}>
+                <IconButton aria-label="sort" sx={{ padding: "10%" }} onClick={handleClick}>
+                    <SortIcon fontSize='large' />
+                </IconButton>
+            </GenericHoverPopover>
             <Popover open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', }}>
                 <ToggleButtonGroup
                     color="primary"
diff --git a/frontend/src/Pages/LandingPage/LandingPage.tsx b/frontend/src/Pages/LandingPage/LandingPage.tsx
index f5308740..a33e75d0 100644
--- a/frontend/src/Pages/LandingPage/LandingPage.tsx
+++ b/frontend/src/Pages/LandingPage/LandingPage.tsx
@@ -14,7 +14,7 @@ export default function LandingPage() {
             <div style={{ position: "absolute"}}>
                 <AnimatedBackground
                     name="ptsCanvasStyle"
-                    background="#123"
+                    background="rgba(17, 34, 51, .94)"
                     play={true}
                 />
             </div>
diff --git a/frontend/src/Pages/Profile/ProfileContentSelector.tsx b/frontend/src/Pages/Profile/ProfileContentSelector.tsx
index ba1a2d17..87bd2953 100644
--- a/frontend/src/Pages/Profile/ProfileContentSelector.tsx
+++ b/frontend/src/Pages/Profile/ProfileContentSelector.tsx
@@ -14,18 +14,19 @@ import TabsUnstyled from '@mui/base/TabsUnstyled';
 import TabsListUnstyled from '@mui/base/TabsListUnstyled';
 import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
 import TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';
+import GenericHoverPopover from '../../Helper/Generics/GenericHoverPopover';
 
 const blue = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#1f9affd3',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
+    50: '#F0F7FF',
+    100: '#C2E0FF',
+    200: '#80BFFF',
+    300: '#66B2FF',
+    400: '#3399FF',
+    500: '#1f9affd3',
+    600: '#0072E5',
+    700: '#0059B2',
+    800: '#004C99',
+    900: '#003A75',
 };
 
 const Tab = styled(TabUnstyled)`
@@ -96,28 +97,32 @@ export default function ProfileContentSelector({ userProfile, notifyChange }: Pr
         <>
             <div className="container-profile">
                 <div className="my-profile-box">
-                    <div style={{ position: "relative", display: "flex", marginLeft: "1%", marginTop: "2%", alignItems: "center", justifyContent: "center"}}>
+                    <div style={{ position: "relative", display: "flex", marginLeft: "1%", marginTop: "2%", alignItems: "center", justifyContent: "center" }}>
                         <div style={{ flex: "1.2 0 0", padding: "1%" }}>
                             <Image className="profile-pic" src={userProfile.profilePicPath || "img_avatar.png"} roundedCircle />
                         </div>
                         <div style={{ flex: "7 0 0" }}>
                             <h1 id="userDisplay" className='user-name'>{userProfile.displayName}</h1>
                             <div>
-                                <p style={{ fontSize: "calc(10px + 1vw)", marginLeft: "5%", wordBreak: "break-all"}}>{userProfile.bio}</p>
+                                <p style={{ fontSize: "calc(10px + 1vw)", marginLeft: "5%", wordBreak: "break-all" }}>{userProfile.bio}</p>
                             </div>
                         </div>
                         {isMyProfile &&
                             <>
-                                <div className='corner-icon' style={{flexDirection: "column"}}>
+                                <div className='corner-icon' style={{ flexDirection: "column" }}>
                                     <div>
-                                        <IconButton aria-label="edit-profile" onClick={handleOpenEdit}>
-                                            <EditIcon style={{ fontSize: "calc(12px + 2.5vw)", color: DefaultValues.black}} />
-                                        </IconButton>
+                                        <GenericHoverPopover tooltipText={"Edit Profile"}>
+                                            <IconButton aria-label="edit-profile" onClick={handleOpenEdit}>
+                                                <EditIcon style={{ fontSize: "calc(12px + 2.5vw)", color: DefaultValues.black }} />
+                                            </IconButton>
+                                        </GenericHoverPopover>
                                     </div>
                                     <div>
-                                        <IconButton aria-label="add-content" onClick={handleOpenCreate}>
-                                            <AddCircleIcon style={{ fontSize: "calc(12px + 2.5vw)" , color: DefaultValues.black }} />
-                                        </IconButton>
+                                        <GenericHoverPopover tooltipText={"Add " + currentSection}>
+                                            <IconButton aria-label="add-content" onClick={handleOpenCreate}>
+                                                <AddCircleIcon style={{ fontSize: "calc(12px + 2.5vw)", color: DefaultValues.black }} />
+                                            </IconButton>
+                                        </GenericHoverPopover>
                                     </div>
                                 </div>