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/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/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..7f0b80df3 100644
--- a/client/src/components/sidebar/friends/Friend.tsx
+++ b/client/src/components/sidebar/friends/Friend.tsx
@@ -1,7 +1,8 @@
 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';
@@ -23,19 +24,28 @@ 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 Friend = ({ firstName, lastName, id, profileURL }: FriendDTO) => {
   const [kebabOpen, setKebabOpen] = useState(false);
   const { sidebarCollapsed } = useContext(AppContext);
   const { isDarkMode } = useGetUserSettingsQuery();
 
+  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={() => {
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/UserProfile.tsx b/client/src/components/sidebar/friends/UserProfile.tsx
index 9e44dbaa8..2cdd71259 100644
--- a/client/src/components/sidebar/friends/UserProfile.tsx
+++ b/client/src/components/sidebar/friends/UserProfile.tsx
@@ -26,22 +26,22 @@ 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' }}
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        src={profileURL || emptyProfile}
+        style={{ borderRadius: 999, backgroundColor: 'white', objectFit: 'cover', width: '34px', height: '34px' }}
       />
-      {!sidebarCollapsed && (
+      {(!sidebarCollapsed || overrideCollapse) && (
         <div>
           <StyledFullname>{getFullName(firstName, lastName)}</StyledFullname>
         </div>
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/components/timetable/DroppedClass.tsx b/client/src/components/timetable/DroppedClass.tsx
index 6372c1751..12315a134 100644
--- a/client/src/components/timetable/DroppedClass.tsx
+++ b/client/src/components/timetable/DroppedClass.tsx
@@ -36,6 +36,11 @@ const DroppedClass: React.FC<DroppedClassProps> = ({
   setCopiedEvent,
   copiedEvent,
 }) => {
+  let readOnly = false;
+  if (location.pathname !== '/home') {
+    readOnly = true;
+  }
+
   const [fullscreenVisible, setFullscreenVisible] = useState(false);
   const [popupOpen, setPopupOpen] = useState(false);
   const [contextMenu, setContextMenu] = useState<null | { x: number; y: number }>(null);
@@ -85,6 +90,9 @@ const DroppedClass: React.FC<DroppedClassProps> = ({
     }
 
     const startDrag = () => {
+      if (readOnly) {
+        return;
+      }
       timer = null;
       setIsDrag(true);
       setDragTarget(classCard, currCourse, isSquareEdges, eventCopy);
diff --git a/client/src/components/timetable/DroppedEvent.tsx b/client/src/components/timetable/DroppedEvent.tsx
index a407864d3..f7fcf469c 100644
--- a/client/src/components/timetable/DroppedEvent.tsx
+++ b/client/src/components/timetable/DroppedEvent.tsx
@@ -41,6 +41,11 @@ const DroppedEvent: React.FC<DroppedEventProps> = ({
   setCopiedEvent,
   copiedEvent,
 }) => {
+  let readOnly = false;
+  if (location.pathname !== '/home') {
+    readOnly = true;
+  }
+  
   const [fullscreenVisible, setFullscreenVisible] = useState(false);
   const [popupOpen, setPopupOpen] = useState(false);
   const [contextMenu, setContextMenu] = useState<null | { x: number; y: number }>(null);
@@ -84,6 +89,9 @@ const DroppedEvent: React.FC<DroppedEventProps> = ({
 
     const startDrag = () => {
       timer = null;
+      if (readOnly) {
+        return;
+      } 
       setIsDrag(true);
       setDragTarget(eventPeriod, null, isSquareEdges, eventCopy, eventId);
       setInfoVisibility(false);
diff --git a/client/src/components/timetable/ExpandedEventView.tsx b/client/src/components/timetable/ExpandedEventView.tsx
index 6caebe62a..663e83e5c 100644
--- a/client/src/components/timetable/ExpandedEventView.tsx
+++ b/client/src/components/timetable/ExpandedEventView.tsx
@@ -65,6 +65,10 @@ const ExpandedEventView: React.FC<ExpandedEventViewProps> = ({
   setIsEditing,
   isEditing,
 }) => {
+  if (window.location.pathname !== '/home') {
+    // return;
+    isEditing = false;
+  }
   const { name, location, description, color } = eventPeriod.event;
   const { day, start, end } = eventPeriod.time;
   const [isChanged, setIsChanged] = useState<boolean>(false);
@@ -226,9 +230,12 @@ const ExpandedEventView: React.FC<ExpandedEventViewProps> = ({
   };
 
   const handleDeleteEvent = (id: string) => {
-    const updatedEventData = { ...createdEvents };
-    delete updatedEventData[id];
-    setCreatedEvents(updatedEventData);
+    if (isEditing) {
+      const updatedEventData = { ...createdEvents };
+      delete updatedEventData[id];
+      setCreatedEvents(updatedEventData);
+    }
+
   };
 
   const handleSaveNewColor = () => {
diff --git a/client/src/components/timetable/Timetable.tsx b/client/src/components/timetable/Timetable.tsx
index bd7c719ff..9013b2137 100644
--- a/client/src/components/timetable/Timetable.tsx
+++ b/client/src/components/timetable/Timetable.tsx
@@ -10,6 +10,7 @@ import { TimetableProps } from '../../interfaces/PropTypes';
 import DroppedCards from './DroppedCards';
 import Dropzones from './Dropzones';
 import { TimetableLayout } from './TimetableLayout';
+import { useLocation } from 'react-router';
 
 const StyledTimetable = styled(Box, {
   shouldForwardProp: (prop) => !['rows', 'cols'].includes(prop.toString()),
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>