diff --git a/client/src/App.tsx b/client/src/App.tsx
index 41b60acfb..7a10ade95 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -4,7 +4,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import * as Sentry from '@sentry/react';
 import React, { useContext, useEffect, useMemo } from 'react';
-import { Outlet } from 'react-router';
+import { Outlet, useLocation } from 'react-router';
 
 import getCourseInfo from './api/getCourseInfo';
 import getCoursesList from './api/getCoursesList';
@@ -134,6 +134,7 @@ const App: React.FC = () => {
     setAssignedColors,
   } = useContext(CourseContext);
 
+  const location = useLocation();
   const { preferredTheme, isDarkMode, unscheduleClassesByDefault, convertToLocalTimezone } = useGetUserSettingsQuery();
 
   const decodedAssignedColors = useColorsDecoder(assignedColors, preferredTheme);
@@ -569,6 +570,46 @@ const App: React.FC = () => {
     },
   };
 
+  const timetableView = useMemo(() => {
+    const currentPathname = location.pathname;
+    const searchParams = location.search;
+    console.log(currentPathname);
+    if (currentPathname === '/home') {
+      return (
+        <>
+          <TimetableTabs />
+          <Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
+          <ICSButton
+            onClick={() => {
+              downloadIcsFile(selectedCourses, createdEvents, selectedClasses, firstDayOfTerm)
+                .then(() => {
+                  /* do nothing */
+                })
+                .catch(() => {
+                  /* do nothing */
+                });
+            }}
+          >
+            save to calendar
+          </ICSButton>
+          <Sponsors />
+          <Footer />
+          <Alerts />
+        </>
+      );
+    } else {
+      return <Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />;
+    }
+  }, [
+    location,
+    selectedClasses,
+    createdEvents,
+    selectedCourses,
+    firstDayOfTerm,
+    handleSelectClass,
+    decodedAssignedColors,
+  ]);
+
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={themeObject}>
@@ -586,16 +627,7 @@ const App: React.FC = () => {
                     handleRemoveCourse={handleRemoveCourse}
                   />
                   <Outlet />
-                  <TimetableTabs />
-                  <Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
-                  <ICSButton
-                    onClick={() => downloadIcsFile(selectedCourses, createdEvents, selectedClasses, firstDayOfTerm)}
-                  >
-                    save to calendar
-                  </ICSButton>
-                  <Sponsors />
-                  <Footer />
-                  <Alerts />
+                  {timetableView}
                   <SubcomPromotion />
                   <PromotionPopup
                     imgSrc={T3SelectGif}
diff --git a/client/src/components/controls/Controls.tsx b/client/src/components/controls/Controls.tsx
index fc96c7a99..d98e116a5 100644
--- a/client/src/components/controls/Controls.tsx
+++ b/client/src/components/controls/Controls.tsx
@@ -1,8 +1,10 @@
 import { Box, Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useLocation } from 'react-router';
 
 import { ControlsProps } from '../../interfaces/PropTypes';
+import UserProfile from '../sidebar/friends/UserProfile';
 import Autotimetabler from './Autotimetabler';
 import CourseSelect from './CourseSelect';
 import CustomEvents from './CustomEvent';
@@ -18,6 +20,20 @@ const TermSelectWrapper = styled(Box)`
   align-items: flex-start;
 `;
 
+const FriendTimetableLabelContainer = styled(Box)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: ${({ theme }) => theme.palette.secondary.light};
+  border: 0.75px solid;
+  border-color: ${({ theme }) => theme.palette.text.primary};
+  padding: 10px 0;
+  border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  font-weight: 700;
+`;
+
 const SelectWrapper = styled(Box)`
   display: flex;
   flex-direction: row;
@@ -52,50 +68,71 @@ const Controls: React.FC<ControlsProps> = ({
   handleSelectCourse,
   handleRemoveCourse,
 }) => {
+  const location = useLocation();
+  const additionalControlsDisplay = useMemo(() => {
+    if (location.pathname !== '/home') {
+      return (
+        <>
+          <TermSelectWrapper>
+            <TermSelect />
+          </TermSelectWrapper>
+          <FriendTimetableLabelContainer>
+            <UserProfile firstName="Sunny" lastName="Chen" overrideCollapse={true} />
+          </FriendTimetableLabelContainer>
+        </>
+      );
+    }
+    return (
+      <>
+        <Grid
+          container
+          direction="row"
+          size={{
+            xs: 12,
+            md: 6.5,
+          }}
+        >
+          <TermSelectWrapper>
+            <TermSelect />
+          </TermSelectWrapper>
+
+          <SelectWrapper minWidth={'296px'}>
+            <CourseSelect
+              assignedColors={assignedColors}
+              handleSelect={handleSelectCourse}
+              handleRemove={handleRemoveCourse}
+            />
+          </SelectWrapper>
+        </Grid>
+        <Grid
+          container
+          direction="row"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+          size={{
+            xs: 12,
+            md: 5.5,
+          }}
+        >
+          <CustomEventsWrapper>
+            <CustomEvents />
+          </CustomEventsWrapper>
+          <AutotimetablerWrapper>
+            <Autotimetabler handleSelectClass={handleSelectClass} />
+          </AutotimetablerWrapper>
+          <HistoryWrapper>
+            <History />
+          </HistoryWrapper>
+        </Grid>
+      </>
+    );
+  }, [location.pathname, assignedColors, handleSelectCourse, handleRemoveCourse, handleSelectClass]);
+
   return (
     <Grid container sx={{ paddingLeft: '66px' }} spacing={2}>
-      <Grid
-        container
-        direction="row"
-        size={{
-          xs: 12,
-          md: 6.5,
-        }}
-      >
-        <TermSelectWrapper>
-          <TermSelect />
-        </TermSelectWrapper>
-
-        <SelectWrapper minWidth={'296px'}>
-          <CourseSelect
-            assignedColors={assignedColors}
-            handleSelect={handleSelectCourse}
-            handleRemove={handleRemoveCourse}
-          />
-        </SelectWrapper>
-      </Grid>
-      <Grid
-        container
-        direction="row"
-        sx={{
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-        size={{
-          xs: 12,
-          md: 5.5,
-        }}
-      >
-        <CustomEventsWrapper>
-          <CustomEvents />
-        </CustomEventsWrapper>
-        <AutotimetablerWrapper>
-          <Autotimetabler handleSelectClass={handleSelectClass} />
-        </AutotimetablerWrapper>
-        <HistoryWrapper>
-          <History />
-        </HistoryWrapper>
-      </Grid>
+      {additionalControlsDisplay}
     </Grid>
   );
 };
diff --git a/client/src/components/sidebar/AddFriendsButton.tsx b/client/src/components/sidebar/AddFriendsButton.tsx
index bd47696ee..324b88cc5 100644
--- a/client/src/components/sidebar/AddFriendsButton.tsx
+++ b/client/src/components/sidebar/AddFriendsButton.tsx
@@ -6,6 +6,17 @@ import { useContext, useState } from 'react';
 import { AppContext } from '../../context/AppContext';
 import AddFriendsMenu from './AddFriendsMenu';
 import CustomModal from './CustomModel';
+import PendingInvitesBadge from './PendingInvitesBadge';
+
+const BadgeWrapper = styled('div')`
+  position: relative;
+`;
+
+const BadgePositioner = styled('div')`
+  position: absolute;
+  bottom: 29px;
+  right: 3px;
+`;
 
 const StyledAddButton = styled(IconButton)`
   display: flex;
@@ -17,12 +28,16 @@ const StyledAddButton = styled(IconButton)`
   color: ${({ theme }) => theme.palette.text.primary};
   border: 1px solid;
   border-color: ${({ theme }) => theme.palette.primary.main};
+  width: 100%;
 `;
 
 const StyledAddIcon = styled(AddCircle)`
   color: ${({ theme }) => theme.palette.primary.main};
 `;
 
+// Hardcoded values to be replaced
+const friendInvites = 2;
+
 interface AddFriendsButtonProps {
   friendsListOpen: boolean;
 }
@@ -39,12 +54,18 @@ const AddFriendsButton = ({ friendsListOpen }: AddFriendsButtonProps) => {
 
   return (
     <>
-      <StyledAddButton onClick={toggleModal}>
-        {!sidebarCollapsed && <Typography fontSize={15}>Add Friends</Typography>}
-        <Tooltip title="Add Friends" placement="right">
-          <StyledAddIcon />
-        </Tooltip>
-      </StyledAddButton>
+      <BadgeWrapper>
+        <StyledAddButton onClick={toggleModal}>
+          {!sidebarCollapsed && <Typography fontSize={15}>Add Friends</Typography>}
+            <Tooltip title="Add Friends" placement="right">
+              <StyledAddIcon />
+            </Tooltip>
+        </StyledAddButton>
+        
+        <BadgePositioner>
+          <PendingInvitesBadge count={friendInvites} />
+        </BadgePositioner>
+      </BadgeWrapper>
       <CustomModal
         description="Add Friends"
         content={<AddFriendsMenu />}
diff --git a/client/src/components/sidebar/AddFriendsMenu.tsx b/client/src/components/sidebar/AddFriendsMenu.tsx
index ad145b296..1256140df 100644
--- a/client/src/components/sidebar/AddFriendsMenu.tsx
+++ b/client/src/components/sidebar/AddFriendsMenu.tsx
@@ -3,6 +3,13 @@ import { Button, ButtonGroup, CircularProgress, Grid, InputBase, Paper, Snackbar
 import { useMemo, useState } from 'react';
 
 import { SettingButton, SettingsItem, SettingsText } from './Settings';
+import PendingInvitesBadge from './PendingInvitesBadge';
+
+const RightContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
 
 const AddFriendText = styled(SettingsText)`
   font-weight: 500;
@@ -54,6 +61,7 @@ enum State {
 // TODO: replace hard code with server implementation
 const code = 'MQ7T2';
 const link = 'http://notangles.devsoc.app/invite?code=MQ7T2';
+const friendInvites = 2;
 
 const AddFriendsMenu = () => {
   const [codeCopyState, setCodeCopyState] = useState<State>(State.Ready);
@@ -101,7 +109,11 @@ const AddFriendsMenu = () => {
     <>
       <SettingButton>
         <AddFriendText>Friend Requests</AddFriendText>
-        <ArrowRight />
+        <RightContainer>
+          <PendingInvitesBadge count={friendInvites}/>
+          <ArrowRight />
+        </RightContainer>
+        
       </SettingButton>
       <SettingsItem>
         <MenuSubContainer>
diff --git a/client/src/components/sidebar/CustomModalOpener.tsx b/client/src/components/sidebar/CustomModalOpener.tsx
index b0601d4d0..6e3e0d2a8 100644
--- a/client/src/components/sidebar/CustomModalOpener.tsx
+++ b/client/src/components/sidebar/CustomModalOpener.tsx
@@ -13,6 +13,7 @@ interface CustomModalOpenerProps {
   content: ReactNode;
   isClickable: boolean;
   isSelected?: boolean;
+  optionalHandleClick?: () => void;
 }
 
 const ShowModalButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== 'isSelected' })<{
@@ -40,6 +41,7 @@ const CustomModalOpener: React.FC<CustomModalOpenerProps> = ({
   content,
   isClickable,
   isSelected = false,
+  optionalHandleClick,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { sidebarCollapsed } = useContext(AppContext);
@@ -48,6 +50,7 @@ const CustomModalOpener: React.FC<CustomModalOpenerProps> = ({
     if (isClickable) {
       setIsOpen(!isOpen);
     }
+    if (optionalHandleClick) optionalHandleClick();
   };
 
   return (
diff --git a/client/src/components/sidebar/FriendsButton.tsx b/client/src/components/sidebar/FriendsButton.tsx
index 6982ca640..6ad9357e5 100644
--- a/client/src/components/sidebar/FriendsButton.tsx
+++ b/client/src/components/sidebar/FriendsButton.tsx
@@ -1,10 +1,12 @@
 import { ArrowDropDown, ArrowDropUp, Person } from '@mui/icons-material';
+import GroupIcon from '@mui/icons-material/Group';
 import { IconButton, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/system';
 import { useContext, useMemo } from 'react';
 
 import { AppContext } from '../../context/AppContext';
+import PendingInvitesBadge from './PendingInvitesBadge';
 
 interface FriendsButtonProps {
   friendsListOpen: boolean;
@@ -32,6 +34,22 @@ const IndividualComponentTypography = styled(Typography)`
   font-size: 16px;
 `;
 
+const RightContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+`;
+
+const BadgePositioner = styled('div', { shouldForwardProp: (prop) => prop !== 'sidebarCollapsed' })<{
+  sidebarCollapsed: boolean;
+}>`
+  display: ${({ sidebarCollapsed }) => (sidebarCollapsed ? '' : 'flex' )};
+  position: ${({ sidebarCollapsed }) => (sidebarCollapsed ? 'absolute' : 'static' )};
+  bottom: -2px;
+  right: 14px;
+`;
+
 // TODO: Repurpose using Sunny's design for friends
 const FriendsButton = ({ friendsListOpen, handleFriendsListToggle }: FriendsButtonProps) => {
   const { sidebarCollapsed } = useContext(AppContext);
@@ -39,15 +57,22 @@ const FriendsButton = ({ friendsListOpen, handleFriendsListToggle }: FriendsButt
     if (sidebarCollapsed) return null;
     return friendsListOpen ? <ArrowDropUp /> : <ArrowDropDown />;
   }, [sidebarCollapsed, friendsListOpen]);
+  const friendInvites = 2; // Hardcoded 
 
   return (
     <Tooltip title="Friends" placement="right">
       <StyledFriendsButton color="inherit" isSelected={false} onClick={handleFriendsListToggle}>
         <StyledFriendsContainer>
-          <Person />
+          <GroupIcon />
           <IndividualComponentTypography>{sidebarCollapsed ? '' : 'Friends'}</IndividualComponentTypography>
         </StyledFriendsContainer>
-        {friendToggleArrow}
+        <RightContainer>
+          <BadgePositioner sidebarCollapsed={sidebarCollapsed}>
+            <PendingInvitesBadge count={friendInvites} showBadge={!friendsListOpen}/>
+          </BadgePositioner>
+          {friendToggleArrow}
+        </RightContainer>
+        
       </StyledFriendsButton>
     </Tooltip>
   );
diff --git a/client/src/components/sidebar/PendingInvitesBadge.tsx b/client/src/components/sidebar/PendingInvitesBadge.tsx
new file mode 100644
index 000000000..2d8b8aace
--- /dev/null
+++ b/client/src/components/sidebar/PendingInvitesBadge.tsx
@@ -0,0 +1,27 @@
+import { Badge, styled } from "@mui/material";
+
+const StyledBadge = styled(Badge)`
+  & .MuiBadge-badge {
+    background-color: ${({ theme }) => theme.palette.error.light};
+    color: white;
+    font-weight: 700;
+    font-size: 10px;
+    height: 16px;
+    min-width: 16px;
+    padding: 0;
+    border-radius: 50%;
+  }
+`;
+
+interface PendingInvitesBadgeProps {
+  count: number;
+  showBadge?: boolean;
+}
+
+const PendingInvitesBadge = ({ count, showBadge = true }: PendingInvitesBadgeProps) => {
+  return <StyledBadge badgeContent={showBadge && count > 0 ? count : 0} />;
+};
+
+export default PendingInvitesBadge;
+
+
diff --git a/client/src/components/sidebar/Sidebar.tsx b/client/src/components/sidebar/Sidebar.tsx
index d3dd5b738..e4d367ec4 100644
--- a/client/src/components/sidebar/Sidebar.tsx
+++ b/client/src/components/sidebar/Sidebar.tsx
@@ -2,6 +2,7 @@ import { CalendarMonth, Description, Info, Security, Settings as SettingsIcon }
 import { Divider, Drawer, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useContext, useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
 
 import notanglesLogoGif from '../../assets/notangles.gif';
 import notanglesLogo from '../../assets/notangles_1.png';
@@ -158,6 +159,9 @@ const Sidebar = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const collapsedWidth = useMemo(() => (isMobile ? 0 : 80), [isMobile]);
 
+  const location = useLocation();
+  const navigate = useNavigate();
+
   const [currLogo, setCurrLogo] = useState(notanglesLogo);
   const [friendsListOpen, setFriendsListOpen] = useState(false);
   const { sidebarCollapsed, setSidebarCollapsed } = useContext(AppContext);
@@ -231,7 +235,10 @@ const Sidebar = () => {
                 // currently not clickable since this is our current page
                 isClickable={false}
                 // hardcoded until we move away from single page site
-                isSelected={true}
+                isSelected={location.pathname === '/home'}
+                optionalHandleClick={() => {
+                  navigate('/home');
+                }}
               />
               <FriendsButton
                 friendsListOpen={friendsListOpen}
diff --git a/client/src/components/sidebar/friends/Friend.tsx b/client/src/components/sidebar/friends/Friend.tsx
index 2fbd142da..7a7822ad0 100644
--- a/client/src/components/sidebar/friends/Friend.tsx
+++ b/client/src/components/sidebar/friends/Friend.tsx
@@ -1,11 +1,13 @@
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { IconButton, styled, Tooltip } from '@mui/material';
 import { Box } from '@mui/system';
-import { useContext, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
+import { useNavigate } from 'react-router';
 
 import { useGetUserSettingsQuery } from '../../../api/user/queries';
 import { AppContext } from '../../../context/AppContext';
 import UserProfile from './UserProfile';
+import RemoveFriend from './RemoveFriend';
 
 const StyledFriendContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'isDarkMode' && prop !== 'sidebarCollapsed',
@@ -23,27 +25,52 @@ const StyledFriendContainer = styled(Box, {
       isDarkMode ? theme.palette.secondary.dark : theme.palette.secondary.light}
 `;
 
-interface FriendProps {
+export interface FriendDTO {
   firstName: string;
+  lastName: string;
+  id: string;
+  profileURL: string;
 }
 
-const Friend = ({ firstName }: FriendProps) => {
-  const [kebabOpen, setKebabOpen] = useState(false);
+const Friend = ({ firstName, lastName, id, profileURL }: FriendDTO) => {
   const { sidebarCollapsed } = useContext(AppContext);
   const { isDarkMode } = useGetUserSettingsQuery();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleKebabClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const kebabOpen = Boolean(anchorEl);
+
+  const navigate = useNavigate();
+
+  const handleFriendClick = useCallback(() => {
+    navigate(`/friend/${id}`);
+  }, [id, navigate]);
 
   return (
-    <Tooltip title={sidebarCollapsed ? firstName : ''} placement="right">
-      <StyledFriendContainer isDarkMode={isDarkMode} sidebarCollapsed={sidebarCollapsed}>
-        <UserProfile firstName={firstName} lastName="" />
+    <Tooltip title={sidebarCollapsed ? `${firstName} ${lastName}` : ''} placement="right">
+      <StyledFriendContainer isDarkMode={isDarkMode} sidebarCollapsed={sidebarCollapsed} onClick={handleFriendClick}>
+        <UserProfile firstName={firstName} lastName={lastName} profileURL={profileURL} />
         {!sidebarCollapsed && (
-          <IconButton
-            onClick={() => {
-              setKebabOpen((prev) => !prev);
-            }}
-          >
-            <MoreVertIcon />
-          </IconButton>
+          <>
+            <IconButton onClick={handleKebabClick}>
+              <MoreVertIcon />
+            </IconButton>
+            <RemoveFriend
+              anchorEl={anchorEl}
+              open={kebabOpen}
+              onClose={handlePopoverClose}
+              firstName={firstName}
+              lastName={lastName}
+              profileURL={profileURL}
+            />
+          </>
         )}
       </StyledFriendContainer>
     </Tooltip>
diff --git a/client/src/components/sidebar/friends/FriendsList.tsx b/client/src/components/sidebar/friends/FriendsList.tsx
index e495362a9..184352355 100644
--- a/client/src/components/sidebar/friends/FriendsList.tsx
+++ b/client/src/components/sidebar/friends/FriendsList.tsx
@@ -6,7 +6,7 @@ import Fuse from 'fuse.js';
 import { useContext, useMemo, useState } from 'react';
 
 import { AppContext } from '../../../context/AppContext';
-import Friend from './Friend';
+import Friend, { FriendDTO } from './Friend';
 import friendList from './friends.json';
 
 const FriendsListContainer = styled(Box)`
@@ -31,12 +31,28 @@ const FriendsList = () => {
     // TODO: replace hard coded data with integration with server
     let friends = friendList;
     if (searchVal.length === 0) {
-      return friends.map((friend, index) => <Friend key={index} firstName={friend} />);
+      return friends.map(({ firstName, lastName, id, profileURL }) => (
+        <Friend
+          key={id as string}
+          firstName={firstName as string}
+          lastName={lastName as string}
+          id={id as string}
+          profileURL={profileURL as string}
+        />
+      ));
     }
 
-    const fuzzy = new Fuse<string>(friendList, { threshold: 0.4 });
+    const fuzzy = new Fuse<FriendDTO>(friendList, { threshold: 0.4, keys: ['firstName', 'lastName'] });
     friends = fuzzy.search(searchVal).map((result) => result.item);
-    return friends.map((friend, index) => <Friend key={index} firstName={friend} />);
+    return friends.map(({ firstName, lastName, id, profileURL }) => (
+      <Friend
+        key={id as string}
+        firstName={firstName as string}
+        lastName={lastName as string}
+        id={id as string}
+        profileURL={profileURL as string}
+      />
+    ));
   }, [searchVal]);
 
   const handleClickSearchBarIcon = () => {
diff --git a/client/src/components/sidebar/friends/RemoveFriend.tsx b/client/src/components/sidebar/friends/RemoveFriend.tsx
new file mode 100644
index 000000000..13bca4580
--- /dev/null
+++ b/client/src/components/sidebar/friends/RemoveFriend.tsx
@@ -0,0 +1,145 @@
+import { Alert, Button, Dialog, Popover, Snackbar, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useState } from 'react';
+import UserProfilePicture from './UserProfilePicture';
+
+const RemoveFriendDialog = styled(Dialog)<{ isMobile: boolean }>(({ theme, isMobile }) => ({
+  '& .MuiDialog-paper': {
+    borderRadius: theme.shape.borderRadius,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    maxWidth: isMobile ? '100%' : '30%',
+  },
+}));
+
+const StyledContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin: 25px;
+  gap: 10px;
+`;
+
+const StyledButtonContainer = styled('div')`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const DialogButtonBase = styled(Button)`
+  width: 50%;
+  text-transform: none;
+  font-weight: 500;
+`;
+
+const CancelRemove = styled(DialogButtonBase)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[300],
+  color: theme.palette.text.primary,
+
+  '&:hover': {
+    backgroundColor: theme.palette.grey[400],
+  },
+}));
+
+const ConfirmRemove = styled(DialogButtonBase)(({ theme }) => ({
+  backgroundColor: theme.palette.error.light,
+  color: theme.palette.error.contrastText,
+  '&:hover': {
+    backgroundColor: theme.palette.error.main,
+  },
+}));
+
+const StyledDialogTitle = styled(Typography)`
+  font-weight: 600;
+  font-size: 1.1rem;
+`;
+
+const StyledDialogText = styled(Typography)`
+  color: gray;
+  text-align: left;
+`;
+
+interface RemoveFriendProps {
+  anchorEl: HTMLElement | null;
+  open: boolean;
+  onClose: () => void;
+  firstName: string;
+  lastName: string;
+  profileURL?: string;
+}
+
+const RemoveFriend = ({ anchorEl, open, onClose, firstName, lastName, profileURL }: RemoveFriendProps) => {
+  const [openDialog, setOpenDialog] = useState(false);
+  const [showBanner, setShowBanner] = useState(false);
+
+  const handleDialogClose = () => {
+    setOpenDialog(false);
+  };
+
+  const handleConfirmRemove = () => {
+    setOpenDialog(false);
+    setShowBanner(true);
+  };
+
+  const handleBannerClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') return;
+    setShowBanner(false);
+  };
+
+  return (
+    <>
+      <RemoveFriendDialog open={openDialog} onClose={handleDialogClose} isMobile={false}>
+        <StyledContainer>
+          <UserProfilePicture profileURL={profileURL} size={52} alt={`${firstName} ${lastName}`} />
+          <StyledDialogTitle>
+            Remove {firstName} {lastName}?
+          </StyledDialogTitle>
+          <StyledDialogText>Are you sure you want to remove {firstName} from your friends?</StyledDialogText>
+          <StyledButtonContainer>
+            <CancelRemove onClick={handleDialogClose}>Cancel</CancelRemove>
+            <ConfirmRemove onClick={handleConfirmRemove}>Remove Friend</ConfirmRemove>
+          </StyledButtonContainer>
+        </StyledContainer>
+      </RemoveFriendDialog>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={onClose}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'center',
+          horizontal: 'left',
+        }}
+        sx={{ ml: '-10px' }}
+      >
+        <Button
+          color="error"
+          fullWidth
+          onClick={() => {
+            setOpenDialog(true);
+            onClose();
+          }}
+          sx={{ textTransform: 'none' }}
+        >
+          Remove Friend
+        </Button>
+      </Popover>
+
+      <Snackbar open={showBanner} autoHideDuration={3000} onClose={handleBannerClose}>
+        <Alert variant="filled" severity="success" sx={{ width: '100%' }} onClose={handleBannerClose}>
+          Removed friend from friendlist
+        </Alert>
+      </Snackbar>
+    </>
+  );
+};
+export default RemoveFriend;
diff --git a/client/src/components/sidebar/friends/UserProfile.tsx b/client/src/components/sidebar/friends/UserProfile.tsx
index dfac8be8c..a883480fb 100644
--- a/client/src/components/sidebar/friends/UserProfile.tsx
+++ b/client/src/components/sidebar/friends/UserProfile.tsx
@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import React, { useContext } from 'react';
 
 import { AppContext } from '../../../context/AppContext';
-
-export const emptyProfile = 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png';
+import UserProfilePicture from './UserProfilePicture';
 
 const StyledContainer = styled('div')`
   display: flex;
@@ -18,7 +17,7 @@ const StyledFullname = styled('div')`
 `;
 
 const getTextWidth = (text: string, font: string): number => {
-  let canvas = document.createElement('canvas');
+  const canvas = document.createElement('canvas');
 
   const context = canvas.getContext('2d');
   if (!context) {
@@ -50,22 +49,18 @@ const getFullName = (firstName: string, lastName: string) => {
   return fullname;
 };
 
-const UserProfile: React.FC<{ firstName: string; lastName: string; profileURL?: string }> = ({
-  firstName,
-  lastName,
-  profileURL,
-}) => {
+const UserProfile: React.FC<{
+  firstName: string;
+  lastName: string;
+  profileURL?: string;
+  overrideCollapse?: boolean;
+}> = ({ firstName, lastName, profileURL, overrideCollapse }) => {
   const { sidebarCollapsed } = useContext(AppContext);
 
   return (
     <StyledContainer>
-      <img
-        src={profileURL ?? emptyProfile}
-        width={34}
-        height={34}
-        style={{ borderRadius: 999, backgroundColor: 'white' }}
-      />
-      {!sidebarCollapsed && (
+      <UserProfilePicture profileURL={profileURL} size={34} alt={`${firstName} ${lastName}`} />
+      {(!sidebarCollapsed || overrideCollapse) && (
         <div>
           <StyledFullname>{getFullName(firstName, lastName)}</StyledFullname>
         </div>
diff --git a/client/src/components/sidebar/friends/UserProfilePicture.tsx b/client/src/components/sidebar/friends/UserProfilePicture.tsx
new file mode 100644
index 000000000..5f3509465
--- /dev/null
+++ b/client/src/components/sidebar/friends/UserProfilePicture.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export const emptyProfile = 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png';
+
+type UserProfilePicProps = {
+  profileURL?: string;
+  size?: number;
+  alt?: string;
+};
+
+const UserProfilePicture: React.FC<UserProfilePicProps> = ({ profileURL, size = 34, alt }) => {
+  return (
+    <img
+      src={profileURL ?? emptyProfile}
+      alt={alt ?? 'profile'}
+      style={{
+        borderRadius: 999,
+        backgroundColor: 'white',
+        objectFit: 'cover',
+        width: `${size}px`,
+        height: `${size}px`,
+      }}
+    />
+  );
+};
+
+export default UserProfilePicture;
diff --git a/client/src/components/sidebar/friends/friends.json b/client/src/components/sidebar/friends/friends.json
index bcd1c99a5..87fb24f1e 100644
--- a/client/src/components/sidebar/friends/friends.json
+++ b/client/src/components/sidebar/friends/friends.json
@@ -1,12 +1,50 @@
 [
-  "Lucas Harvey",
-  "Mark Tran",
-  "Ben Quin",
-  "Jason Poon",
-  "Fritz Rehde",
-  "Sunny Chen",
-  "Ana Kiperas",
-  "Tet Nay Lin",
-  "Kai Fox",
-  "Meredith Zhang"
+  {
+    "firstName": "Lucas",
+    "lastName": "Harvey",
+    "id": "awbdawiudbwau",
+    "profileURL": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhaTTHYe3pq6RYazy_xpEmcmxHs1TbwE2ffQ&s"
+  },
+  {
+    "firstName": "Mark",
+    "lastName": "Tran",
+    "id": "daiwhdwoahdwioahd",
+    "profileURL": "https://i.ytimg.com/vi/-hF2qhio5RU/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLDd4dOurruzSdr62ADACkYLprW4Og"
+  },
+  {
+    "firstName": "Ana",
+    "lastName": "Kiperas",
+    "id": "21y39821y3hb",
+    "profileURL": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGYIqf3m4nPGABzXz-gqhB4y76m3wTaqTRDg&s"
+  },
+  {
+    "firstName": "Ben",
+    "lastName": "Quin",
+    "id": "21073y89hujbfeo",
+    "profileURL": "https://t3.ftcdn.net/jpg/01/93/38/40/360_F_193384026_F34lj9rX9W4ixlVZBrTJmijK010Tdv0j.jpg"
+  },
+  {
+    "firstName": "Fritz",
+    "lastName": "Rehde",
+    "id": "2190e7210eyhfboj",
+    "profileURL": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjSKoyOjhKTNOkbuXv8zhtxMwtpt39UaMmLA&s"
+  },
+  {
+    "firstName": "Jason",
+    "lastName": "Poon",
+    "id": "2109ey218yeh21boj",
+    "profileURL": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIDQU7kqSBdt3uSRwJhB7wKs8nOC2VvEnuuQ&s"
+  },
+  {
+    "firstName": "Sunny",
+    "lastName": "Chen",
+    "id": "028y3812y3h21be",
+    "profileURL": "https://pbs.twimg.com/profile_images/1311008414156423170/Kxu_7mQS_400x400.jpg"
+  },
+  {
+    "firstName": "Guest",
+    "lastName": "User",
+    "id": "203u21ihenlkn2",
+    "profileURL": ""
+  }
 ]
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 04db2070f..829f334d5 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -75,6 +75,19 @@ const Root: React.FC = () => {
                   >
                     <Route path="/home/event/:encrypted" element={<EventShareModal />} />
                   </Route>
+                  <Route
+                    element={
+                      <QueryClientProvider client={queryClient}>
+                        <Suspense fallback={<PageLoading />}>
+                          <AuthGuard>
+                            <App />
+                          </AuthGuard>
+                          {import.meta.env.MODE === 'development' && <ReactQueryDevtools initialIsOpen={false} />}
+                        </Suspense>
+                      </QueryClientProvider>
+                    }
+                    path="/friend/:friendId"
+                  />
                 </Routes>
               </BrowserRouter>
             </CourseContextProvider>
diff --git a/server/src/auth/auth.service.ts b/server/src/auth/auth.service.ts
index 9c6d9d696..2595ec321 100644
--- a/server/src/auth/auth.service.ts
+++ b/server/src/auth/auth.service.ts
@@ -35,7 +35,7 @@ export class AuthService {
     if (provider === undefined || subject === undefined) {
       throw new Error('Provider and subject must be defined for auth users');
     }
-    const currentYear = new Date().getFullYear().toString();
+    const currentYear = new Date().getFullYear();
     const { availableTerms } =
       await this.graphql.getAvailableTermsFrom(currentYear);
     if (availableTerms.length === 0) {
@@ -75,7 +75,7 @@ export class AuthService {
   }
 
   private async createGuest(params: OnboardParams): Promise<User> {
-    const currentYear = new Date().getFullYear().toString();
+    const currentYear = new Date().getFullYear();
     const { availableTerms } =
       await this.graphql.getAvailableTermsFrom(currentYear);
     if (availableTerms.length === 0) {
@@ -96,6 +96,7 @@ export class AuthService {
               name: this.TIMETABLE_DEFAULT_NAME,
               year,
               term,
+              primary: true,
             };
           }),
         },
diff --git a/server/src/graphql/graphql.service.ts b/server/src/graphql/graphql.service.ts
index 1d0168d36..78779eae5 100644
--- a/server/src/graphql/graphql.service.ts
+++ b/server/src/graphql/graphql.service.ts
@@ -29,7 +29,7 @@ export class GraphqlService {
   }
 
   async getAvailableTermsFrom(
-    currentYear: string = new Date().getFullYear().toString(),
+    currentYear: number = new Date().getFullYear(),
   ): Promise<{ availableTerms: string[] }> {
     const result = await this.sdk.GetAvailableTerms({
       currentYear: currentYear,
diff --git a/server/src/graphql/queries.ts b/server/src/graphql/queries.ts
index 52f8c31f8..3adeb9e7c 100644
--- a/server/src/graphql/queries.ts
+++ b/server/src/graphql/queries.ts
@@ -22,7 +22,7 @@ export const CLASS_DETAILS = gql(`
 `);
 
 export const GET_AVAILABLE_TERMS = gql(`
-  query GetAvailableTerms($currentYear: String!) {
+  query GetAvailableTerms($currentYear: Int!) {
     classes(
       where: {term: {_in: ["T1", "T2", "T3", "U1"]}, year: {_gte: $currentYear}}
       distinct_on: offering_period