diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
deleted file mode 100644
index fd7e416e..00000000
--- a/.github/workflows/workflow.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-name: Format the code
-
-on:
-  push:
-
-jobs:
-  format:
-    runs-on: ubuntu-latest
-    name: Format Files
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "20"
-      - name: Prettier
-        run: npx prettier --write **/*.{js,ts,tsx,json,md}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - uses: stefanzweifel/git-auto-commit-action@v4
-        if: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
-        with:
-          commit_message: "Auto-formatted the code using Prettier"
diff --git a/course-matrix/backend/__tests__/timetablesController.test.ts b/course-matrix/backend/__tests__/timetablesController.test.ts
index e9b49fcf..852c360e 100644
--- a/course-matrix/backend/__tests__/timetablesController.test.ts
+++ b/course-matrix/backend/__tests__/timetablesController.test.ts
@@ -320,27 +320,6 @@ describe("PUT /api/timetables/:id", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  test("should return error code 400 and message 'New timetable title or semester or updated favorite status is required when updating a timetable' if request body is empty", async () => {
-    // Make sure the test user is authenticated
-    const user_id = "testuser04-f84fd0da-d775-4424-ad88-d9675282453c";
-    const timetableData = {};
-
-    // Mock authHandler to simulate the user being logged in
-    (
-      authHandler as jest.MockedFunction<typeof authHandler>
-    ).mockImplementationOnce(mockAuthHandler(user_id));
-
-    const response = await request(app)
-      .put("/api/timetables/1")
-      .send(timetableData);
-
-    // Check that the `update` method was called
-    expect(response.statusCode).toBe(400);
-    expect(response.body).toEqual({
-      error:
-        "New timetable title or semester or updated favorite status or email notifications enabled is required when updating a timetable",
-    });
-  });
 
   test("should update the timetable successfully", async () => {
     // Make sure the test user is authenticated
@@ -361,7 +340,7 @@ describe("PUT /api/timetables/:id", () => {
 
     // Check that the `update` method was called
     expect(response.statusCode).toBe(200);
-    expect(response.body).toEqual({
+    expect(response.body).toMatchObject({
       timetable_title: "Updated Title",
       semester: "Spring 2025",
     });
diff --git a/course-matrix/backend/src/constants/availableFunctions.ts b/course-matrix/backend/src/constants/availableFunctions.ts
index b0ef0c96..fe3df416 100644
--- a/course-matrix/backend/src/constants/availableFunctions.ts
+++ b/course-matrix/backend/src/constants/availableFunctions.ts
@@ -41,7 +41,6 @@ export const availableFunctions: AvailableFunctions = {
     try {
       // Retrieve user_id
       const user_id = (req as any).user.id;
-
       // Retrieve user timetable item based on user_id
       let timeTableQuery = supabase
         .schema("timetable")
@@ -63,7 +62,11 @@ export const availableFunctions: AvailableFunctions = {
         };
       }
 
-      return { status: 200, data: timetableData };
+      return {
+        status: 200,
+        timetableCount: timetableData.length,
+        data: timetableData,
+      };
     } catch (error) {
       console.log(error);
       return { status: 400, error: error };
@@ -113,6 +116,7 @@ export const availableFunctions: AvailableFunctions = {
       }
 
       let updateData: any = {};
+      updateData.updated_at = new Date().toISOString();
       if (timetable_title) updateData.timetable_title = timetable_title;
       if (semester) updateData.semester = semester;
 
@@ -198,6 +202,9 @@ export const availableFunctions: AvailableFunctions = {
     try {
       // Extract event details and course information from the request
       const { name, semester, courses, restrictions } = args;
+      // Get user id from session authentication to insert in the user_id col
+      const user_id = (req as any).user.id;
+
       if (name.length > 50) {
         return {
           status: 400,
@@ -205,6 +212,23 @@ export const availableFunctions: AvailableFunctions = {
         };
       }
 
+      // Timetables cannot exceed the size of 25.
+      const { count: timetable_count, error: timetableCountError } =
+        await supabase
+          .schema("timetable")
+          .from("timetables")
+          .select("*", { count: "exact", head: true })
+          .eq("user_id", user_id);
+
+      console.log(timetable_count);
+
+      if ((timetable_count ?? 0) >= 25) {
+        return {
+          status: 400,
+          error: "You have exceeded the limit of 25 timetables",
+        };
+      }
+
       const courseOfferingsList: OfferingList[] = [];
       const validCourseOfferingsList: GroupedOfferingList[] = [];
       const maxdays = getMaxDays(restrictions);
@@ -277,9 +301,6 @@ export const availableFunctions: AvailableFunctions = {
 
       // ------ CREATE FLOW ------
 
-      // Get user id from session authentication to insert in the user_id col
-      const user_id = (req as any).user.id;
-
       // Retrieve timetable title
       const schedule = trim(validSchedules)[0];
       if (!name || !semester) {
diff --git a/course-matrix/backend/src/controllers/aiController.ts b/course-matrix/backend/src/controllers/aiController.ts
index 00573b27..8fe7a2da 100644
--- a/course-matrix/backend/src/controllers/aiController.ts
+++ b/course-matrix/backend/src/controllers/aiController.ts
@@ -244,7 +244,6 @@ export const chat = asyncHandler(async (req: Request, res: Response) => {
             - Allowing natural language queries about courses, offerings, and academic programs
             - Providing personalized recommendations based on degree requirements and course availability
             - Creating, reading, updating, and deleting user timetables based on natural language
-        
             ## Your Capabilities
             - Create new timetables based on provided courses and restrictions
             - Update timetable names and semesters
@@ -266,11 +265,12 @@ export const chat = asyncHandler(async (req: Request, res: Response) => {
             }/dashboard/timetable?edit=[[TIMETABLE_ID]] , where TIMETABLE_ID is the id of the respective timetable.
             - If the user provides a course code of length 6 like CSCA08, then assume they mean CSCA08H3 (H3 appended)
             - If the user wants to create a timetable:
-              1. First call getCourses to get course information on the requested courses, 
-              2. If the user provided a semester, then call getOfferings with the provided courses and semester to ensure the courses are actually offered in the semester. 
+              1. First call getTimetables to refetch most recent info on timetable names + timetableCount. DO NOT assume timetable names and # of timetables is same since last query.
+              2. Then call getCourses to get course information on the requested courses, 
+              3. If the user provided a semester, then call getOfferings with the provided courses and semester to ensure the courses are actually offered in the semester. 
                 a) If a course is NOT returned by getOFferings, then list it under "Excluded courses" with "reason: not offered in [provided semester]"
                 b) If no courses have offerings, then do not generate the timetable.
-              3. Lastly, call generateTimetable with the provided information.
+              4. Lastly, call generateTimetable with the provided information.
             - Do not make up fake courses or offerings. 
             - If a user asks about a course that you do not know of, acknowledge this.
             - You can only edit title of the timetable, nothing else. If a user tries to edit something else, acknowledge this limitation.
@@ -280,12 +280,14 @@ export const chat = asyncHandler(async (req: Request, res: Response) => {
             - After a deletion has been cancelled, /timetable confirm will do nothing. If the user wants to delete again after cancelling, they must specify so.
             - Do not create multiple timetables for a single user query. Each user query can create at most 1 timetable
             - If you try to update or create a timetable but you get an error saying a timetable with the same name already exists, then ask the user to rename
+            - It is possible for users to delete timetables / update them manually. For this reason, always refetch getTimtables before creation, to get the latest names and timetable count. Do not assume the timetables are the same since the last query.
+            - If a user asks for the timetable count, always refetch getTimetables. Assume this count could have changed between user queries.
             `,
         messages,
         tools: {
           getTimetables: tool({
             description:
-              "Get all the timetables of the currently logged in user.",
+              "Get all the timetables of the currently logged in user AND the number of timetables of the currently logged in user",
             parameters: z.object({}),
             execute: async (args) => {
               return await availableFunctions.getTimetables(args, req);
diff --git a/course-matrix/backend/src/controllers/timetablesController.ts b/course-matrix/backend/src/controllers/timetablesController.ts
index 7b1e99d2..2a3cfeca 100644
--- a/course-matrix/backend/src/controllers/timetablesController.ts
+++ b/course-matrix/backend/src/controllers/timetablesController.ts
@@ -31,6 +31,21 @@ export default {
           .status(400)
           .json({ error: "Timetable Title cannot be over 50 characters long" });
       }
+      // Timetables cannot exceed the size of 25.
+      const { count: timetable_count, error: timetableCountError } =
+        await supabase
+          .schema("timetable")
+          .from("timetables")
+          .select("*", { count: "exact", head: true })
+          .eq("user_id", user_id);
+
+      console.log(timetable_count);
+
+      if ((timetable_count ?? 0) >= 25) {
+        return res
+          .status(400)
+          .json({ error: "You have exceeded the limit of 25 timetables" });
+      }
 
       // Check if a timetable with the same title already exist for this user
       const { data: existingTimetable, error: existingTimetableError } =
@@ -163,17 +178,6 @@ export default {
         favorite,
         email_notifications_enabled,
       } = req.body;
-      if (
-        !timetable_title &&
-        !semester &&
-        favorite === undefined &&
-        email_notifications_enabled === undefined
-      ) {
-        return res.status(400).json({
-          error:
-            "New timetable title or semester or updated favorite status or email notifications enabled is required when updating a timetable",
-        });
-      }
 
       // Timetables cannot be longer than 50 characters.
       if (timetable_title && timetable_title.length > 50) {
@@ -184,7 +188,6 @@ export default {
 
       //Retrieve the authenticated user
       const user_id = (req as any).user.id;
-
       //Retrieve users allowed to access the timetable
       const { data: timetableUserData, error: timetableUserError } =
         await supabase
@@ -194,7 +197,6 @@ export default {
           .eq("user_id", user_id)
           .eq("id", id)
           .maybeSingle();
-
       if (timetableUserError)
         return res.status(400).json({ error: timetableUserError.message });
 
@@ -202,7 +204,6 @@ export default {
       if (!timetableUserData || timetableUserData.length === 0) {
         return res.status(404).json({ error: "Calendar id not found" });
       }
-
       // Check if another timetable with the same title already exist for this user
       const { data: existingTimetable, error: existingTimetableError } =
         await supabase
@@ -213,7 +214,6 @@ export default {
           .eq("timetable_title", timetable_title)
           .neq("id", id)
           .maybeSingle();
-
       if (existingTimetableError) {
         return res.status(400).json({ error: existingTimetableError.message });
       }
@@ -223,8 +223,8 @@ export default {
           .status(400)
           .json({ error: "Another timetable with this title already exists" });
       }
-
       let updateData: any = {};
+      updateData.updated_at = new Date().toISOString();
       if (timetable_title) updateData.timetable_title = timetable_title;
       if (semester) updateData.semester = semester;
       if (favorite !== undefined) updateData.favorite = favorite;
@@ -240,13 +240,11 @@ export default {
         .eq("id", id)
         .select()
         .single();
-
       const { data: timetableData, error: timetableError } =
         await updateTimetableQuery;
 
       if (timetableError)
         return res.status(400).json({ error: timetableError.message });
-
       // If no records were updated due to non-existence timetable or it doesn't belong to the user.
       if (!timetableData || timetableData.length === 0) {
         return res.status(404).json({
@@ -255,6 +253,7 @@ export default {
       }
       return res.status(200).json(timetableData);
     } catch (error) {
+      console.error(error);
       return res.status(500).send({ error });
     }
   }),
diff --git a/course-matrix/frontend/__tests__/convertTimestampToLocaleTime.test.ts b/course-matrix/frontend/__tests__/convertTimestampToLocaleTime.test.ts
new file mode 100644
index 00000000..ff80f9bb
--- /dev/null
+++ b/course-matrix/frontend/__tests__/convertTimestampToLocaleTime.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it, test } from "@jest/globals";
+
+import { convertTimestampToLocaleTime } from "../src/utils/convert-timestamp-to-locale-time";
+
+describe("convertTimestampToLocaleTime", () => {
+  test("should convert a valid timestamp string to a locale time string", () => {
+    const timestamp = "2025-03-28T12:00:00Z";
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(typeof result).toBe("string");
+    expect(result.length).toBeGreaterThan(0); // Ensures it returns a non-empty string
+  });
+
+  test("should convert a valid numeric timestamp to a locale time string", () => {
+    const timestamp = 1711622400000; // Equivalent to 2025-03-28T12:00:00Z
+    // in milliseconds
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(typeof result).toBe("string");
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  test("convert to locale time date is different", () => {
+    const timestamp = "2025-03-28 02:33:02.589Z";
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(typeof result).toBe("string");
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  test("should return 'Invalid Date' for an invalid timestamp", () => {
+    const timestamp = "invalid";
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(result).toBe("Invalid Date");
+  });
+});
diff --git a/course-matrix/frontend/index.html b/course-matrix/frontend/index.html
index 7ce8c4c3..f1256cda 100644
--- a/course-matrix/frontend/index.html
+++ b/course-matrix/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/img/logo.png" />
+    <link rel="icon" type="image/png" href="/img/course-matrix-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Course Matrix </title>
   </head>
diff --git a/course-matrix/frontend/package-lock.json b/course-matrix/frontend/package-lock.json
index c9ab7e61..2cc0b991 100644
--- a/course-matrix/frontend/package-lock.json
+++ b/course-matrix/frontend/package-lock.json
@@ -25,6 +25,7 @@
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-switch": "^1.1.3",
+        "@radix-ui/react-toast": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@reduxjs/toolkit": "^2.5.1",
         "@schedule-x/drag-and-drop": "^2.21.1",
@@ -2828,6 +2829,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.6.tgz",
+      "integrity": "sha512-gN4dpuIVKEgpLn1z5FhzT9mYRUitbfZq9XqN/7kkBMUgFTzTG8x/KszWJugJXHcwxckY8xcKDZPz7kG3o6DsUA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
diff --git a/course-matrix/frontend/package.json b/course-matrix/frontend/package.json
index 367abe76..a7944a0b 100644
--- a/course-matrix/frontend/package.json
+++ b/course-matrix/frontend/package.json
@@ -30,6 +30,7 @@
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@reduxjs/toolkit": "^2.5.1",
     "@schedule-x/drag-and-drop": "^2.21.1",
diff --git a/course-matrix/frontend/public/img/course-matrix-logo.png b/course-matrix/frontend/public/img/course-matrix-logo.png
new file mode 100644
index 00000000..6f41280f
Binary files /dev/null and b/course-matrix/frontend/public/img/course-matrix-logo.png differ
diff --git a/course-matrix/frontend/public/img/grey-avatar.png b/course-matrix/frontend/public/img/grey-avatar.png
new file mode 100644
index 00000000..6ffe1296
Binary files /dev/null and b/course-matrix/frontend/public/img/grey-avatar.png differ
diff --git a/course-matrix/frontend/src/App.tsx b/course-matrix/frontend/src/App.tsx
index 60b97279..1b58ce9f 100644
--- a/course-matrix/frontend/src/App.tsx
+++ b/course-matrix/frontend/src/App.tsx
@@ -6,6 +6,7 @@ import SignupPage from "./pages/Signup/SignUpPage";
 import AuthRoute from "./components/auth-route";
 import SignupSuccessfulPage from "./pages/Signup/SignupSuccessfulPage";
 import LoginRoute from "./components/login-route";
+import { Toaster } from "./components/ui/toaster";
 
 /**
  * App Component
@@ -44,6 +45,7 @@ function App() {
           element={<AuthRoute component={Dashboard} />}
         />
       </Routes>
+      <Toaster />
     </div>
   );
 }
diff --git a/course-matrix/frontend/src/components/UserMenu.tsx b/course-matrix/frontend/src/components/UserMenu.tsx
index 619ef1bb..fd9750a3 100644
--- a/course-matrix/frontend/src/components/UserMenu.tsx
+++ b/course-matrix/frontend/src/components/UserMenu.tsx
@@ -59,7 +59,11 @@ import { useEffect, useState, useRef } from "react";
  * @returns {JSX.Element} The rendered user menu dropdown with account options.
  */
 
-export function UserMenu() {
+interface UserMenuProps {
+  setOpen: (open: boolean) => void;
+}
+
+export function UserMenu({ setOpen }: UserMenuProps) {
   const dispatch = useDispatch();
   const [logout] = useLogoutMutation();
   const navigate = useNavigate();
@@ -100,24 +104,6 @@ export function UserMenu() {
     }
   };
 
-  const handleUsernameUpdate = async () => {
-    try {
-      const username = usernameRef?.current?.value;
-      if (!username || !username.trim()) {
-        return;
-      }
-      user_metadata.user.user_metadata.username =
-        usernameRef.current?.value.trimEnd();
-      localStorage.setItem("userInfo", JSON.stringify(user_metadata));
-      await usernameUpdate({
-        userId: userId,
-        username: user_metadata.user.user_metadata.username,
-      });
-    } catch (err) {
-      console.error("Update username failed: ", err);
-    }
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -125,7 +111,7 @@ export function UserMenu() {
           {username}
           <Avatar>
             {/* Avatar Image is the profile picture of the user. The default avatar is used as a placeholder for now. */}
-            <AvatarImage src="/img/default-avatar.png" />
+            <AvatarImage src="/img/grey-avatar.png" className="h-18 w-18" />
             {/* Avatar Fallback is the initials of the user. Avatar Fallback will be used if Avatar Image fails to load */}
             <AvatarFallback>{initials}</AvatarFallback>
           </Avatar>
@@ -138,52 +124,10 @@ export function UserMenu() {
             {user_metadata?.user?.user_metadata?.email}
           </p>
         </div>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-          <Dialog>
-            <DialogTrigger asChild>
-              <button className="w-full text-left">Edit Account</button>
-            </DialogTrigger>
-            <DialogContent className="gap-5">
-              <DialogHeader>
-                <DialogTitle>Edit Account</DialogTitle>
-                <DialogDescription>
-                  Edit your account details.
-                </DialogDescription>
-              </DialogHeader>
-              <Label htmlFor="username">New User Name</Label>
-              {/* Disable this email input box for now until we have the backend for accounts set up */}
-              <Input
-                id="username"
-                type="text"
-                placeholder={user_metadata.user.user_metadata.username}
-                ref={usernameRef}
-                onKeyDown={(e) => {
-                  if (e.key === " ") {
-                    e.stopPropagation(); // Allows space input
-                  }
-                }}
-              />
-              <Label htmlFor="email">New Email</Label>
-              {/* Disable this email input box for now until we have the backend for accounts set up */}
-              <Input
-                id="email"
-                type="email"
-                placeholder="john.doe@gmail.com"
-                disabled
-              />
-              <Label htmlFor="email">New Password</Label>
-              {/* Disable this password input box for now until we have the backend for accounts set up */}
-              <Input id="password" disabled={true} />
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button variant="secondary">Cancel</Button>
-                </DialogClose>
-                <DialogClose asChild>
-                  <Button onClick={handleUsernameUpdate}>Save</Button>
-                </DialogClose>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+        <DropdownMenuItem>
+          <button className="w-full text-left" onClick={() => setOpen(true)}>
+            Edit Account
+          </button>
         </DropdownMenuItem>
         <DropdownMenuItem>
           <button className="w-full text-left" onClick={handleLogout}>
diff --git a/course-matrix/frontend/src/components/imagePlaceholder.tsx b/course-matrix/frontend/src/components/imagePlaceholder.tsx
new file mode 100644
index 00000000..5d025b4c
--- /dev/null
+++ b/course-matrix/frontend/src/components/imagePlaceholder.tsx
@@ -0,0 +1,16 @@
+export const ImagePlaceholder = () => {
+  const blurredImagePlaceholder =
+    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAAAAAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAQIAAxEhMf/aAAwDAQACEQMRAD8ASlWzQwxoGsuragA8nk6c+ONWNeOixw2aRm2AMbs5JAJJPk9aUpAJViJIGenZEwn/2Q==";
+
+  return (
+    <div
+      className="absolute inset-0 rounded-lg bg-gray-200"
+      style={{
+        backgroundImage: `url(${blurredImagePlaceholder})`,
+        backgroundSize: "cover",
+        filter: "blur(8px)",
+        transform: "scale(1.1)",
+      }}
+    ></div>
+  );
+};
diff --git a/course-matrix/frontend/src/components/logo.tsx b/course-matrix/frontend/src/components/logo.tsx
index d05d3411..4ec495dc 100644
--- a/course-matrix/frontend/src/components/logo.tsx
+++ b/course-matrix/frontend/src/components/logo.tsx
@@ -1,14 +1,27 @@
-import logoImg from "/img/logo.png";
+import { useState, useEffect } from "react";
+import logoImg from "/img/course-matrix-logo.png";
+import { ImagePlaceholder } from "./imagePlaceholder";
 
 const Logo = () => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
   return (
     <>
       <div className="p-2 flex gap-2 items-center font-medium">
-        <img
-          src={logoImg}
-          alt="profile-img"
-          className="rounded-lg aspect-square object-cover w-8"
-        ></img>
+        <div className="relative rounded-lg w-8 h-8">
+          {!imageLoaded && <ImagePlaceholder />}
+
+          <img
+            src={logoImg}
+            alt="Course Matrix logo"
+            className={`rounded-lg aspect-square object-cover w-8 h-8 transition-opacity duration-300 ${
+              imageLoaded ? "opacity-100" : "opacity-0"
+            }`}
+            loading="lazy"
+            onLoad={() => setImageLoaded(true)}
+          />
+        </div>
+
         <div className="flex items-center gap-1">
           <div>Course</div>
           <div className="text-green-500">Matrix</div>
diff --git a/course-matrix/frontend/src/components/ui/badge.tsx b/course-matrix/frontend/src/components/ui/badge.tsx
new file mode 100644
index 00000000..d3d5d604
--- /dev/null
+++ b/course-matrix/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/course-matrix/frontend/src/components/ui/toast.tsx b/course-matrix/frontend/src/components/ui/toast.tsx
new file mode 100644
index 00000000..2bc23c1f
--- /dev/null
+++ b/course-matrix/frontend/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/course-matrix/frontend/src/components/ui/toaster.tsx b/course-matrix/frontend/src/components/ui/toaster.tsx
new file mode 100644
index 00000000..5887f080
--- /dev/null
+++ b/course-matrix/frontend/src/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/course-matrix/frontend/src/hooks/use-toast.ts b/course-matrix/frontend/src/hooks/use-toast.ts
new file mode 100644
index 00000000..6555e795
--- /dev/null
+++ b/course-matrix/frontend/src/hooks/use-toast.ts
@@ -0,0 +1,191 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/course-matrix/frontend/src/models/timetable-form.ts b/course-matrix/frontend/src/models/timetable-form.ts
index 05d022b8..9ec4fd81 100644
--- a/course-matrix/frontend/src/models/timetable-form.ts
+++ b/course-matrix/frontend/src/models/timetable-form.ts
@@ -106,7 +106,7 @@ export const RestrictionSchema = z
   })
   .refine(
     (data) => {
-      if (data.startTime && data.endTime) {
+      if (data.type === "Restrict Between" && data.startTime && data.endTime) {
         return data.startTime < data.endTime;
       }
       return true; // Allow if either undefined
diff --git a/course-matrix/frontend/src/pages/Compare/CompareTimetables.tsx b/course-matrix/frontend/src/pages/Compare/CompareTimetables.tsx
index 4a42dd00..54c68012 100644
--- a/course-matrix/frontend/src/pages/Compare/CompareTimetables.tsx
+++ b/course-matrix/frontend/src/pages/Compare/CompareTimetables.tsx
@@ -1,129 +1,140 @@
-import {
-  useGetTimetableQuery,
-  useGetTimetablesQuery,
-} from "@/api/timetableApiSlice";
+import { useGetTimetablesQuery } from "@/api/timetableApiSlice";
 import { Button } from "@/components/ui/button";
-import { Timetable, TimetableEvents } from "@/utils/type-utils";
-import { useEffect, useState } from "react";
+import { Timetable } from "@/utils/type-utils";
+import { useCallback, useEffect, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
-import Calendar from "../TimetableBuilder/Calendar";
-import { useGetEventsQuery } from "@/api/eventsApiSlice";
-import { Spinner } from "@/components/ui/spinner";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { CompareFormSchema } from "../Home/TimetableCompareButton";
-import { format } from "path";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from "@/components/ui/form";
 import {
   Select,
   SelectContent,
-  SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { SemesterIcon } from "@/components/semester-icon";
 import { GitCompareArrows } from "lucide-react";
+import { useGetTimetablesSharedWithMeQuery } from "@/api/sharedApiSlice";
+import { TimetableShare } from "../Home/Home";
+import ViewCalendar from "../TimetableBuilder/ViewCalendar";
+import { sortTimetablesComparator } from "@/utils/calendar-utils";
+import TimetableCompareItem from "../Home/TimetableCompareItem";
 
 export const CompareTimetables = () => {
   const [timetable1, setTimetable1] = useState<Timetable>();
   const [timetable2, setTimetable2] = useState<Timetable>();
-  const [offeringIds1, setOfferingIds1] = useState<number[]>();
-  const [offeringIds2, setOfferingIds2] = useState<number[]>();
   const [queryParams] = useSearchParams();
 
+  const preselectedTimetableId1 = queryParams.get("id1");
+  const preselectedTimetableId2 = queryParams.get("id2");
+  const preselectedUserId1 = queryParams.get("userId1");
+  const preselectedUserId2 = queryParams.get("userId2");
+  const needsToLoadTimetable =
+    preselectedTimetableId1 !== null &&
+    preselectedTimetableId2 !== null &&
+    preselectedUserId1 !== null &&
+    preselectedUserId2 !== null;
+
   const compareForm = useForm<z.infer<typeof CompareFormSchema>>({
     resolver: zodResolver(CompareFormSchema),
     defaultValues: {
       timetable1: queryParams.has("id1")
-        ? parseInt(queryParams.get("id1") ?? "0")
+        ? `timetable1/${preselectedTimetableId1}/${preselectedUserId1}`
         : undefined,
       timetable2: queryParams.has("id2")
-        ? parseInt(queryParams.get("id2") ?? "0")
+        ? `timetable2/${preselectedTimetableId2}/${preselectedUserId2}`
         : undefined,
     },
   });
 
-  const onSubmit = (values: z.infer<typeof CompareFormSchema>) => {
-    console.log("Compare Form submitted:", values);
-    const timetableId1 = compareForm.getValues("timetable1");
-    const timetableId2 = compareForm.getValues("timetable2");
-    setTimetable1(timetables.find((t) => t.id === timetableId1));
-    refetchEvents1();
-    setTimetable2(timetables.find((t) => t.id === timetableId2));
-    refetchEvents2();
-  };
-
-  const {
-    data: timetables,
-    isLoading,
-    refetch,
-  } = useGetTimetablesQuery() as {
+  const { data: myTimetablesData } = useGetTimetablesQuery() as {
     data: Timetable[];
-    isLoading: boolean;
-    refetch: () => void;
   };
+  const { data: sharedWithMeTimetablesData } =
+    useGetTimetablesSharedWithMeQuery() as { data: TimetableShare[] };
 
-  const { data: timetableEventsData1, refetch: refetchEvents1 } =
-    useGetEventsQuery(compareForm.getValues("timetable1") ?? undefined, {
-      skip: compareForm.getValues("timetable1") === undefined,
-    }) as {
-      data: TimetableEvents;
-      refetch: () => void;
-    };
-  const { data: timetableEventsData2, refetch: refetchEvents2 } =
-    useGetEventsQuery(compareForm.getValues("timetable2"), {
-      skip: compareForm.getValues("timetable2") === undefined,
-    }) as {
-      data: TimetableEvents;
-      refetch: () => void;
-    };
+  const myOwningTimetables = [...(myTimetablesData ?? [])].sort(
+    sortTimetablesComparator,
+  );
+  const sharedWithMeTimetables = [...(sharedWithMeTimetablesData ?? [])]
+    .flatMap((share) => share.timetables)
+    .sort(sortTimetablesComparator);
+  const allTimetables = [...myOwningTimetables, ...sharedWithMeTimetables]
+    .map((timetable, index) => ({
+      ...timetable,
+      isShared: index >= myOwningTimetables.length,
+    }))
+    .sort(sortTimetablesComparator);
 
-  useEffect(() => {
-    if (queryParams.has("id1") && timetables) {
-      const id = parseInt(queryParams.get("id1") || "0");
-      compareForm.setValue("timetable1", id);
-      setTimetable1(timetables.find((t) => t.id === id));
-    }
-  }, [timetables]);
+  const [loadedPreselectedTimetables, setLoadedPreselectedTimetables] =
+    useState(!needsToLoadTimetable);
 
   useEffect(() => {
-    if (queryParams.has("id2") && timetables) {
-      const id = parseInt(queryParams.get("id2") || "0");
-      compareForm.setValue("timetable2", id);
-      setTimetable2(timetables.find((t) => t.id === id));
+    if (
+      preselectedTimetableId1 &&
+      preselectedUserId1 &&
+      preselectedTimetableId2 &&
+      preselectedUserId2 &&
+      myTimetablesData &&
+      sharedWithMeTimetablesData &&
+      !loadedPreselectedTimetables
+    ) {
+      setTimetable1(
+        allTimetables.find(
+          (t) =>
+            t.id === parseInt(preselectedTimetableId1) &&
+            t.user_id === preselectedUserId1,
+        ),
+      );
+      setTimetable2(
+        allTimetables.find(
+          (t) =>
+            t.id === parseInt(preselectedTimetableId2) &&
+            t.user_id === preselectedUserId2,
+        ),
+      );
+      setLoadedPreselectedTimetables(true);
     }
-  }, [timetables]);
+  }, [
+    preselectedTimetableId1,
+    preselectedUserId1,
+    preselectedTimetableId2,
+    preselectedUserId2,
+    allTimetables,
+    loadedPreselectedTimetables,
+    myTimetablesData,
+    sharedWithMeTimetablesData,
+  ]);
 
-  // get unique offeringIds for calendar
-  useEffect(() => {
-    if (timetableEventsData1) {
-      const uniqueOfferingIds = new Set<number>();
-      for (const event of timetableEventsData1.courseEvents) {
-        if (!uniqueOfferingIds.has(event.offering_id))
-          uniqueOfferingIds.add(event.offering_id);
-      }
-      setOfferingIds1(Array.from(uniqueOfferingIds));
-    }
-  }, [timetableEventsData1]);
+  const onSubmit = useCallback(
+    (values: z.infer<typeof CompareFormSchema>) => {
+      console.log("Compare Form submitted:", values);
 
-  useEffect(() => {
-    if (timetableEventsData2) {
-      const uniqueOfferingIds = new Set<number>();
-      for (const event of timetableEventsData2.courseEvents) {
-        if (!uniqueOfferingIds.has(event.offering_id))
-          uniqueOfferingIds.add(event.offering_id);
-      }
-      setOfferingIds2(Array.from(uniqueOfferingIds));
-    }
-  }, [timetableEventsData2]);
+      const timetableId1 = parseInt(values.timetable1.split("/")[1]);
+      const timetableId2 = parseInt(values.timetable2.split("/")[1]);
+      const timetableUserId1 = values.timetable1.split("/")[2];
+      const timetableUserId2 = values.timetable2.split("/")[2];
+
+      setTimetable1(
+        allTimetables.find(
+          (t) => t.id === timetableId1 && t.user_id === timetableUserId1,
+        ),
+      );
+      setTimetable2(
+        allTimetables.find(
+          (t) => t.id === timetableId2 && t.user_id === timetableUserId2,
+        ),
+      );
+    },
+    [allTimetables],
+  );
 
   return (
     <>
@@ -146,10 +157,10 @@ export const CompareTimetables = () => {
                   render={({ field }) => (
                     <FormItem>
                       <Select
-                        onValueChange={(value) => field.onChange(Number(value))}
+                        onValueChange={(value) => field.onChange(value)}
                         defaultValue={
                           queryParams.has("id1")
-                            ? (queryParams.get("id1") ?? "")
+                            ? `timetable1/${preselectedTimetableId1}/${preselectedUserId1}`
                             : undefined
                         }
                       >
@@ -159,20 +170,13 @@ export const CompareTimetables = () => {
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          {timetables &&
-                            timetables.map((timetable) => (
-                              <SelectItem
-                                key={timetable.id}
-                                value={timetable.id.toString()}
-                              >
-                                <div className="flex items-center gap-2">
-                                  <SemesterIcon
-                                    semester={timetable.semester}
-                                    size={18}
-                                  />
-                                  <span>{timetable.timetable_title}</span>
-                                </div>
-                              </SelectItem>
+                          {allTimetables &&
+                            allTimetables.map((timetable) => (
+                              <TimetableCompareItem
+                                key={`timetable1/${timetable.id}/${timetable.user_id}`}
+                                timetable={timetable}
+                                timetableNumber={1}
+                              />
                             ))}
                         </SelectContent>
                       </Select>
@@ -190,10 +194,10 @@ export const CompareTimetables = () => {
                   render={({ field }) => (
                     <FormItem>
                       <Select
-                        onValueChange={(value) => field.onChange(Number(value))}
+                        onValueChange={(value) => field.onChange(value)}
                         defaultValue={
                           queryParams.has("id1")
-                            ? (queryParams.get("id2") ?? "")
+                            ? `timetable2/${preselectedTimetableId2}/${preselectedUserId2}`
                             : undefined
                         }
                       >
@@ -203,20 +207,13 @@ export const CompareTimetables = () => {
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          {timetables &&
-                            timetables.map((timetable) => (
-                              <SelectItem
-                                key={timetable.id}
-                                value={timetable.id.toString()}
-                              >
-                                <div className="flex items-center gap-2">
-                                  <SemesterIcon
-                                    semester={timetable.semester}
-                                    size={18}
-                                  />
-                                  <span>{timetable.timetable_title}</span>
-                                </div>
-                              </SelectItem>
+                          {allTimetables &&
+                            allTimetables.map((timetable) => (
+                              <TimetableCompareItem
+                                key={`timetable2/${timetable.id}/${timetable.user_id}`}
+                                timetable={timetable}
+                                timetableNumber={2}
+                              />
                             ))}
                         </SelectContent>
                       </Select>
@@ -237,48 +234,32 @@ export const CompareTimetables = () => {
           <hr className="mb-4" />
           <div className="flex gap-4">
             <div className="w-1/2">
-              {!offeringIds1 ? (
-                <>
-                  {queryParams.has("id1") ? (
-                    <Spinner />
-                  ) : (
-                    <div className="w-full text-center py-[8rem] text-sm bg-gray-100/50 rounded">
-                      Select a timetable to compare
-                    </div>
-                  )}
-                </>
+              {!timetable1 ? (
+                <div className="w-full text-center py-[8rem] text-sm bg-gray-100/50 rounded">
+                  Select a timetable to compare
+                </div>
               ) : (
-                <Calendar
-                  setShowLoadingPage={() => {}}
-                  isChoosingSectionsManually={false}
+                <ViewCalendar
+                  user_id={timetable1.user_id}
+                  calendar_id={timetable1.id}
+                  timetable_title={timetable1?.timetable_title ?? ""}
                   semester={timetable1?.semester ?? "Fall 2025"}
-                  selectedCourses={[]}
-                  newOfferingIds={offeringIds1}
-                  restrictions={[]}
-                  header={timetable1?.timetable_title}
+                  show_fancy_header={false}
                 />
               )}
             </div>
             <div className="w-1/2">
-              {!offeringIds2 ? (
-                <>
-                  {queryParams.has("id2") ? (
-                    <Spinner />
-                  ) : (
-                    <div className="w-full text-center py-[8rem] text-sm bg-gray-100/50 rounded">
-                      Select a timetable to compare
-                    </div>
-                  )}
-                </>
+              {!timetable2 ? (
+                <div className="w-full text-center py-[8rem] text-sm bg-gray-100/50 rounded">
+                  Select a timetable to compare
+                </div>
               ) : (
-                <Calendar
-                  setShowLoadingPage={() => {}}
-                  isChoosingSectionsManually={false}
+                <ViewCalendar
+                  user_id={timetable2.user_id}
+                  calendar_id={timetable2.id}
+                  timetable_title={timetable2?.timetable_title ?? ""}
                   semester={timetable2?.semester ?? "Fall 2025"}
-                  selectedCourses={[]}
-                  newOfferingIds={offeringIds2}
-                  restrictions={[]}
-                  header={timetable2?.timetable_title}
+                  show_fancy_header={false}
                 />
               )}
             </div>
diff --git a/course-matrix/frontend/src/pages/Dashboard/Dashboard.tsx b/course-matrix/frontend/src/pages/Dashboard/Dashboard.tsx
index 4a4ba320..625e15f5 100644
--- a/course-matrix/frontend/src/pages/Dashboard/Dashboard.tsx
+++ b/course-matrix/frontend/src/pages/Dashboard/Dashboard.tsx
@@ -20,6 +20,8 @@ import AssistantPage from "../Assistant/AssistantPage";
 import { RuntimeProvider } from "../Assistant/runtime-provider";
 import Home from "../Home/Home";
 import { CompareTimetables } from "../Compare/CompareTimetables";
+import EditAccountDialog from "./EditAccountDialog";
+import { useState } from "react";
 
 /**
  * Dashboard Component
@@ -38,6 +40,7 @@ import { CompareTimetables } from "../Compare/CompareTimetables";
  */
 const Dashboard = () => {
   const location = useLocation();
+  const [openEditAccountDialog, setOpenEditAccountDialog] = useState(false);
 
   return (
     <>
@@ -79,7 +82,13 @@ const Dashboard = () => {
                       </BreadcrumbList>
                     </Breadcrumb>
                   </div>
-                  <UserMenu />
+                  <div>
+                    <UserMenu setOpen={setOpenEditAccountDialog} />
+                    <EditAccountDialog
+                      open={openEditAccountDialog}
+                      setOpen={setOpenEditAccountDialog}
+                    />
+                  </div>
                 </header>
                 <div>
                   <Routes>
diff --git a/course-matrix/frontend/src/pages/Dashboard/EditAccountDialog.tsx b/course-matrix/frontend/src/pages/Dashboard/EditAccountDialog.tsx
new file mode 100644
index 00000000..cfe4badb
--- /dev/null
+++ b/course-matrix/frontend/src/pages/Dashboard/EditAccountDialog.tsx
@@ -0,0 +1,73 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useUpdateUsernameMutation } from "@/api/authApiSlice";
+import { useRef } from "react";
+
+interface EditAccountDialogProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const EditAccountDialog = ({ open, setOpen }: EditAccountDialogProps) => {
+  const [updateUsername] = useUpdateUsernameMutation();
+
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const user_metadata = JSON.parse(localStorage.getItem("userInfo") ?? "{}"); //User Data
+  const userId = user_metadata.user.id;
+
+  const handleUsernameUpdate = async () => {
+    try {
+      const username = usernameRef?.current?.value;
+      if (!username || !username.trim()) {
+        return;
+      }
+      user_metadata.user.user_metadata.username =
+        usernameRef.current?.value.trimEnd();
+      localStorage.setItem("userInfo", JSON.stringify(user_metadata));
+      await updateUsername({
+        userId: userId,
+        username: user_metadata.user.user_metadata.username,
+      });
+    } catch (err) {
+      console.error("Update username failed: ", err);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="gap-5">
+        <DialogHeader>
+          <DialogTitle>Edit Account</DialogTitle>
+          <DialogDescription>Edit your account details.</DialogDescription>
+        </DialogHeader>
+        <Label htmlFor="username">New User Name</Label>
+        <Input
+          id="username"
+          type="text"
+          placeholder={user_metadata.user.user_metadata.username}
+          ref={usernameRef}
+        />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button onClick={handleUsernameUpdate}>Save</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditAccountDialog;
diff --git a/course-matrix/frontend/src/pages/Home/EmailNotificationSettings.tsx b/course-matrix/frontend/src/pages/Home/EmailNotificationSettings.tsx
index 6214575d..cf52be96 100644
--- a/course-matrix/frontend/src/pages/Home/EmailNotificationSettings.tsx
+++ b/course-matrix/frontend/src/pages/Home/EmailNotificationSettings.tsx
@@ -14,6 +14,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/hooks/use-toast";
 import { TimetableModel } from "@/models/models";
 import { useEffect, useState } from "react";
 
@@ -26,6 +27,7 @@ export const EmailNotificationSettings = ({
 }: EmailNotificationSettingsProps) => {
   const { data, isLoading, refetch } = useGetTimetableQuery(timetableId);
   const [updateTimetable] = useUpdateTimetableMutation();
+  const { toast } = useToast();
   const [toggled, setToggled] = useState<boolean>(false);
 
   const handleCancel = () => {
@@ -47,6 +49,9 @@ export const EmailNotificationSettings = ({
         id: timetableId,
         email_notifications_enabled: toggled,
       }).unwrap();
+      toast({
+        description: `Email notifications have been ${toggled ? "enabled" : "disabled"}.`,
+      });
       refetch();
     } catch (error) {
       console.error("Failed to update timetable:", error);
diff --git a/course-matrix/frontend/src/pages/Home/Home.tsx b/course-matrix/frontend/src/pages/Home/Home.tsx
index 7604f634..ba29e039 100644
--- a/course-matrix/frontend/src/pages/Home/Home.tsx
+++ b/course-matrix/frontend/src/pages/Home/Home.tsx
@@ -11,11 +11,11 @@ import TimetableCard from "./TimetableCard";
 import TimetableCreateNewButton from "./TimetableCreateNewButton";
 import { useGetTimetablesQuery } from "../../api/timetableApiSlice";
 import { TimetableCompareButton } from "./TimetableCompareButton";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import TimetableErrorDialog from "../TimetableBuilder/TimetableErrorDialog";
 import { useGetTimetablesSharedWithMeQuery } from "@/api/sharedApiSlice";
-import SharedCalendar from "../TimetableBuilder/SharedCalendar";
-import { useGetUsernameFromUserIdQuery } from "@/api/authApiSlice";
+import ViewCalendar from "../TimetableBuilder/ViewCalendar";
+import { sortTimetablesComparator } from "@/utils/calendar-utils";
 
 export interface Timetable {
   id: number;
@@ -35,14 +35,6 @@ export interface TimetableShare {
   timetables: Timetable[];
 }
 
-function sortingFunction(a: Timetable, b: Timetable) {
-  if (a.favorite == b.favorite)
-    return b?.updated_at.localeCompare(a?.updated_at);
-  if (a.favorite) return -1;
-  if (b.favorite) return 1;
-  return 0;
-}
-
 /**
  * Home component that displays the user's timetables and provides options to create or compare timetables.
  * @returns {JSX.Element} The rendered component.
@@ -71,13 +63,24 @@ const Home = () => {
   const isLoading = myTimetablesDataLoading || sharedWithmeDataLoading;
 
   const myOwningTimetables = [...(myTimetablesData ?? [])].sort(
-    sortingFunction,
+    sortTimetablesComparator,
   );
   const sharedWithMeTimetables = [...(sharedWithMeData ?? [])]
     .flatMap((share) => share.timetables)
-    .sort(sortingFunction);
+    .sort(sortTimetablesComparator);
+  const allTimetables = [...myOwningTimetables, ...sharedWithMeTimetables]
+    .map((timetable, index) => ({
+      ...timetable,
+      isShared: index >= myOwningTimetables.length,
+    }))
+    .sort(sortTimetablesComparator);
 
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [count, setCount] = useState<number>(0);
+
+  useEffect(() => {
+    if (myTimetablesData !== undefined) setCount(myTimetablesData.length);
+  }, [myTimetablesData]);
   const [activeTab, setActiveTab] = useState("Mine");
 
   const [selectedSharedTimetable, setSelectedSharedTimetable] =
@@ -88,13 +91,6 @@ const Home = () => {
   const selectedSharedTimetableOwnerId = selectedSharedTimetable?.user_id ?? "";
   const selectSharedTimetableSemester = selectedSharedTimetable?.semester ?? "";
 
-  // Get the selected shared timetable owner's username
-  const { data: usernameData } = useGetUsernameFromUserIdQuery(
-    selectedSharedTimetableOwnerId,
-    { skip: selectedSharedTimetableId === -1 },
-  );
-  const ownerUsername = usernameData ?? "";
-
   return (
     <div className="w-full">
       <div className="m-8">
@@ -103,26 +99,33 @@ const Home = () => {
           onOpenChange={() => setSelectedSharedTimetable(null)}
         >
           <DialogTitle></DialogTitle>
-          <DialogContent className="max-w-[70%] max-h-[90%] overflow-y-scroll">
-            <SharedCalendar
+          <DialogContent className="max-w-[80%] max-h-[90%] overflow-y-scroll">
+            <ViewCalendar
               user_id={selectedSharedTimetableOwnerId}
-              user_username={ownerUsername}
               calendar_id={selectedSharedTimetableId}
               timetable_title={selectedSharedTimetableTitle}
               semester={selectSharedTimetableSemester}
+              show_fancy_header={true}
             />
             <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="secondary" size="sm">
-                  Close
-                </Button>
-              </DialogClose>
+              <DialogClose></DialogClose>
             </DialogFooter>
           </DialogContent>
         </Dialog>
         <div className="mb-4 flex items-center gap-2 relative group">
           <h1 className="text-2xl font-medium tracking-tight">My Timetables</h1>
-          <Pin size={24} className="text-blue-500" />
+          <Pin size={24} className="text-green-500" />
+
+          <h1
+            className={`${
+              count >= 25
+                ? "text-sm font-bold text-red-500"
+                : "text-sm font-normal text-black"
+            }`}
+          >
+            {" "}
+            (No. Timetables: {count}/25)
+          </h1>
         </div>
         <TimetableErrorDialog
           errorMessage={errorMessage}
@@ -132,26 +135,30 @@ const Home = () => {
           <div className="flex gap-4">
             <Button
               size="xs"
-              className={`py-3 px-5 hover:bg-blue-300 text-black ${activeTab === "Mine" ? "bg-blue-300" : "bg-blue-100"}`}
+              className={`py-3 px-5 hover:bg-green-300 text-black ${
+                activeTab === "Mine" ? "bg-green-300" : "bg-green-100"
+              }`}
               onClick={() => setActiveTab("Mine")}
             >
               Mine
             </Button>
             <Button
               size="xs"
-              className={`py-3 px-5 hover:bg-blue-300 text-black ${activeTab === "Shared" ? "bg-blue-300" : "bg-blue-100"}`}
+              className={`py-3 px-5 hover:bg-green-300 text-black ${
+                activeTab === "Shared" ? "bg-green-300" : "bg-green-100"
+              }`}
               onClick={() => setActiveTab("Shared")}
             >
               Shared With Me
             </Button>
           </div>
           <div className="flex gap-2">
-            <TimetableCompareButton timetables={myTimetablesData} />
+            <TimetableCompareButton timetables={allTimetables} />
             <TimetableCreateNewButton />
           </div>
         </div>
         <hr />
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 justify-between mt-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 justify-between mt-4">
           {isLoading ? (
             <p className="text-sm text-muted-foreground">Loading...</p>
           ) : activeTab === "Mine" ? (
diff --git a/course-matrix/frontend/src/pages/Home/TimetableCard.tsx b/course-matrix/frontend/src/pages/Home/TimetableCard.tsx
index 4b215b54..8a5618f0 100644
--- a/course-matrix/frontend/src/pages/Home/TimetableCard.tsx
+++ b/course-matrix/frontend/src/pages/Home/TimetableCard.tsx
@@ -19,6 +19,18 @@ import {
 } from "@/api/timetableApiSlice";
 import { Link } from "react-router-dom";
 import { TimetableModel } from "@/models/models";
+import { SemesterIcon } from "@/components/semester-icon";
+import { convertTimestampToLocaleTime } from "../../utils/convert-timestamp-to-locale-time";
+
+const semesterToBgColor = (semester: string) => {
+  if (semester.startsWith("Fall")) {
+    return "bg-red-100";
+  } else if (semester.startsWith("Winter")) {
+    return "bg-blue-100";
+  } else {
+    return "bg-yellow-100";
+  }
+};
 
 interface TimetableCardProps {
   refetchMyTimetables: () => void;
@@ -52,8 +64,9 @@ const TimetableCard = ({
   setSelectedSharedTimetable,
   favorite,
 }: TimetableCardProps) => {
-  const [updateTimetable] = useUpdateTimetableMutation();
+  /// small blurred version
 
+  const [updateTimetable] = useUpdateTimetableMutation();
   const timetableId = timetable.id;
 
   const user_metadata = JSON.parse(localStorage.getItem("userInfo") ?? "{}");
@@ -65,20 +78,13 @@ const TimetableCard = ({
     ? (usernameData ?? "John Doe")
     : loggedInUsername;
 
-  const lastEditedDateArray = lastEditedDate
-    .toISOString()
-    .split("T")[0]
-    .split("-");
-  const lastEditedYear = lastEditedDateArray[0];
-  const lastEditedMonth = lastEditedDateArray[1];
-  const lastEditedDay = lastEditedDateArray[2];
-  const lastEditedDateTimestamp =
-    lastEditedMonth + "/" + lastEditedDay + "/" + lastEditedYear;
-
   const [timetableCardTitle, setTimetableCardTitle] = useState(title);
   const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const { data } = useGetTimetableQuery(timetableId);
+  const { data, refetch } = useGetTimetableQuery(timetableId);
   const [toggled, setToggled] = useState(favorite);
+  const [lastEdited, setLastEdited] = useState(
+    convertTimestampToLocaleTime(lastEditedDate.toISOString()).split(",")[0],
+  );
 
   const handleSave = async () => {
     try {
@@ -92,6 +98,7 @@ const TimetableCard = ({
       setErrorMessage(errorData?.error ?? "Unknown error occurred");
       return;
     }
+    refetch();
   };
 
   useEffect(() => {
@@ -100,6 +107,11 @@ const TimetableCard = ({
       if (val !== undefined) {
         setToggled(val);
       }
+      setLastEdited(
+        convertTimestampToLocaleTime(
+          (data as TimetableModel[])[0]?.updated_at,
+        ).split(",")[0],
+      );
     }
   }, [data]);
 
@@ -120,14 +132,18 @@ const TimetableCard = ({
   };
 
   return isShared ? (
-    <Card className="w-full">
+    <Card className="w-full transition duration-200 hover:bg-gray-100/50 hover:border-green-300">
       <CardHeader>
-        <img
-          src="/img/default-timetable-card-image.png"
-          alt="Timetable default image"
-          className="cursor-pointer"
-          onClick={() => setSelectedSharedTimetable(timetable)}
-        />
+        <div className="relative w-full h-full">
+          <div
+            className={`w-full h-full p-20 flex justify-center rounded-lg ${semesterToBgColor(
+              timetable.semester,
+            )} cursor-pointer animate-fade-in`}
+          >
+            <SemesterIcon semester={timetable.semester} />
+          </div>
+        </div>
+
         <div className="flex justify-between items-center">
           <CardTitle>
             <Input
@@ -156,19 +172,32 @@ const TimetableCard = ({
       </CardHeader>
       <CardContent className="-mt-3">
         <CardDescription className="flex justify-between text-xs">
-          <div>Last edited {lastEditedDateTimestamp}</div>
+          <div>
+            Last edited{" "}
+            {
+              convertTimestampToLocaleTime(lastEditedDate.toISOString()).split(
+                ",",
+              )[0]
+            }
+          </div>
+
           <div>Owned by: {ownerUsername}</div>
         </CardDescription>
       </CardContent>
     </Card>
   ) : (
-    <Card className="w-full">
+    <Card className="w-full transition duration-200 hover:bg-gray-100/50 hover:border-green-300">
       <CardHeader>
         <Link to={`/dashboard/timetable?edit=${timetableId}`}>
-          <img
-            src="/img/default-timetable-card-image.png"
-            alt="Timetable default image"
-          />
+          <div className="relative w-full h-full">
+            <div
+              className={`w-full h-full p-20 flex justify-center rounded-lg ${semesterToBgColor(
+                timetable.semester,
+              )} cursor-pointer animate-fade-in`}
+            >
+              <SemesterIcon semester={timetable.semester} />
+            </div>
+          </div>
         </Link>
         <div className="flex justify-between items-center">
           <CardTitle>
@@ -183,20 +212,19 @@ const TimetableCard = ({
               onChange={(e) => setTimetableCardTitle(e.target.value)}
             />
           </CardTitle>
-          <div className="p-2">
-            <Star
-              className={`cursor-pointer h-5 w-5 transition-colors ${
-                toggled
-                  ? "fill-yellow-500 text-yellow-500"
-                  : "fill-none text-gray-500"
-              } `}
-              onClick={() => handleFavourite()}
-            />
-          </div>
 
           <div className="flex justify-around">
             {!isEditingTitle && (
               <>
+                <Star
+                  size={18}
+                  className={`cursor-pointer transition-colors mt-2 mr-2 ${
+                    toggled
+                      ? "fill-yellow-500 text-yellow-500"
+                      : "fill-none text-gray-500"
+                  } `}
+                  onClick={() => handleFavourite()}
+                />
                 <Button
                   size="sm"
                   variant="ghost"
@@ -226,7 +254,7 @@ const TimetableCard = ({
       </CardHeader>
       <CardContent className="-mt-3">
         <CardDescription className="flex justify-between text-xs">
-          <div>Last edited {lastEditedDateTimestamp}</div>
+          <div>Last edited {lastEdited}</div>
           <div>Owned by: {ownerUsername}</div>
         </CardDescription>
       </CardContent>
diff --git a/course-matrix/frontend/src/pages/Home/TimetableCompareButton.tsx b/course-matrix/frontend/src/pages/Home/TimetableCompareButton.tsx
index a72238a6..e22b84a1 100644
--- a/course-matrix/frontend/src/pages/Home/TimetableCompareButton.tsx
+++ b/course-matrix/frontend/src/pages/Home/TimetableCompareButton.tsx
@@ -8,7 +8,6 @@ import {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-  DialogClose,
 } from "@/components/ui/dialog";
 import {
   Form,
@@ -18,12 +17,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
-  SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -34,10 +30,11 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { z } from "zod";
+import TimetableCompareItem from "./TimetableCompareItem";
 
 export const CompareFormSchema = z.object({
-  timetable1: z.number().positive(),
-  timetable2: z.number().positive(),
+  timetable1: z.string().nonempty(),
+  timetable2: z.string().nonempty(),
 });
 
 interface TimetableCompareDialogProps {
@@ -58,10 +55,14 @@ export const TimetableCompareButton = ({
   });
 
   const onSubmit = (values: z.infer<typeof CompareFormSchema>) => {
-    console.log("Comapare Form submitted:", values);
+    console.log("Compare Form submitted:", values);
+    const timetableId1 = values.timetable1.split("/")[1];
+    const timetableId2 = values.timetable2.split("/")[1];
+    const userId1 = values.timetable1.split("/")[2];
+    const userId2 = values.timetable2.split("/")[2];
     setOpen(false);
     navigate(
-      `/dashboard/compare?id1=${values.timetable1}&id2=${values.timetable2}`,
+      `/dashboard/compare?id1=${timetableId1}&id2=${timetableId2}&userId1=${userId1}&userId2=${userId2}`,
     );
   };
 
@@ -106,9 +107,7 @@ export const TimetableCompareButton = ({
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Timetable 1</FormLabel>
-                  <Select
-                    onValueChange={(value) => field.onChange(Number(value))}
-                  >
+                  <Select onValueChange={(value) => field.onChange(value)}>
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="Select a timetable" />
@@ -116,18 +115,11 @@ export const TimetableCompareButton = ({
                     </FormControl>
                     <SelectContent>
                       {timetables.map((timetable) => (
-                        <SelectItem
-                          key={timetable.id}
-                          value={timetable.id.toString()}
-                        >
-                          <div className="flex items-center gap-2">
-                            <SemesterIcon
-                              semester={timetable.semester}
-                              size={18}
-                            />
-                            <span>{timetable.timetable_title}</span>
-                          </div>
-                        </SelectItem>
+                        <TimetableCompareItem
+                          key={`timetable1/${timetable.id}/${timetable.user_id}`}
+                          timetable={timetable}
+                          timetableNumber={1}
+                        />
                       ))}
                     </SelectContent>
                   </Select>
@@ -142,9 +134,7 @@ export const TimetableCompareButton = ({
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Timetable 2</FormLabel>
-                  <Select
-                    onValueChange={(value) => field.onChange(Number(value))}
-                  >
+                  <Select onValueChange={(value) => field.onChange(value)}>
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="Select a timetable" />
@@ -152,18 +142,11 @@ export const TimetableCompareButton = ({
                     </FormControl>
                     <SelectContent>
                       {timetables.map((timetable) => (
-                        <SelectItem
-                          key={timetable.id}
-                          value={timetable.id.toString()}
-                        >
-                          <div className="flex items-center gap-2">
-                            <SemesterIcon
-                              semester={timetable.semester}
-                              size={18}
-                            />
-                            <span>{timetable.timetable_title}</span>
-                          </div>
-                        </SelectItem>
+                        <TimetableCompareItem
+                          key={`timetable2/${timetable.id}/${timetable.user_id}`}
+                          timetable={timetable}
+                          timetableNumber={2}
+                        />
                       ))}
                     </SelectContent>
                   </Select>
diff --git a/course-matrix/frontend/src/pages/Home/TimetableCompareItem.tsx b/course-matrix/frontend/src/pages/Home/TimetableCompareItem.tsx
new file mode 100644
index 00000000..39884561
--- /dev/null
+++ b/course-matrix/frontend/src/pages/Home/TimetableCompareItem.tsx
@@ -0,0 +1,45 @@
+import { SemesterIcon } from "@/components/semester-icon";
+import { SelectItem } from "@/components/ui/select";
+import { Timetable } from "@/utils/type-utils";
+import { Badge } from "@/components/ui/badge";
+import { useGetUsernameFromUserIdQuery } from "@/api/authApiSlice";
+import { useEffect, useState } from "react";
+
+interface TimetableCompareItemProps {
+  timetable: Timetable;
+  timetableNumber: number;
+}
+
+const TimetableCompareItem = ({
+  timetable,
+  timetableNumber,
+}: TimetableCompareItemProps) => {
+  const { data: usernameData } = useGetUsernameFromUserIdQuery(
+    timetable.user_id,
+  );
+  const [username, setUsername] = useState<string | null>("");
+  const [loadedUsername, setLoadedUsername] = useState(false);
+
+  useEffect(() => {
+    if (usernameData !== undefined && !loadedUsername) {
+      setUsername(usernameData ?? "John Doe");
+      setLoadedUsername(true);
+    }
+  }, [loadedUsername, usernameData]);
+
+  return (
+    <SelectItem
+      value={`timetable${timetableNumber}/${timetable.id}/${timetable.user_id}`}
+    >
+      <div className="flex flex-row justify-between gap-2">
+        <span className="flex items-center gap-2">
+          <SemesterIcon semester={timetable.semester} size={18} />
+          <span>{timetable.timetable_title}</span>
+        </span>
+        <Badge variant="secondary">Owner: {username}</Badge>
+      </div>
+    </SelectItem>
+  );
+};
+
+export default TimetableCompareItem;
diff --git a/course-matrix/frontend/src/pages/TimetableBuilder/Calendar.tsx b/course-matrix/frontend/src/pages/TimetableBuilder/Calendar.tsx
index bc3a4117..ebc40bac 100644
--- a/course-matrix/frontend/src/pages/TimetableBuilder/Calendar.tsx
+++ b/course-matrix/frontend/src/pages/TimetableBuilder/Calendar.tsx
@@ -28,6 +28,7 @@ import { TimetableFormSchema } from "@/models/timetable-form";
 import {
   useGetTimetablesQuery,
   useCreateTimetableMutation,
+  useUpdateTimetableMutation,
 } from "@/api/timetableApiSlice";
 import {
   useGetRestrictionsQuery,
@@ -41,6 +42,7 @@ import {
   useCreateEventMutation,
   useGetEventsQuery,
   useDeleteEventMutation,
+  useUpdateEventMutation,
 } from "@/api/eventsApiSlice";
 import { useGetOfferingsQuery } from "@/api/offeringsApiSlice";
 import { useGetOfferingEventsQuery } from "@/api/offeringsApiSlice";
@@ -89,13 +91,16 @@ const Calendar = React.memo<CalendarProps>(
     const editingTimetableId = parseInt(queryParams.get("edit") ?? "0");
 
     const [createTimetable] = useCreateTimetableMutation();
+    const [updateTimetable] = useUpdateTimetableMutation();
     const [createEvent] = useCreateEventMutation();
     const [deleteEvent] = useDeleteEventMutation();
     const [createRestriction] = useCreateRestrictionMutation();
     const [deleteRestriction] = useDeleteRestrictionMutation();
 
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
+    const [updateErrorMessage, setUpdateErrorMessage] = useState<string | null>(
+      null,
+    );
     const semesterStartDate = getSemesterStartAndEndDates(semester).start;
     const { start: semesterStartDatePlusOneWeek, end: semesterEndDate } =
       getSemesterStartAndEndDatesPlusOneWeek(semester);
@@ -201,8 +206,11 @@ const Calendar = React.memo<CalendarProps>(
           ),
       ),
     ].length;
-    const allOfferingSectionsHaveBeenSelected =
-      totalNumberOfSelectedSections === totalNumberOfRequiredSections;
+    const allOfferingSectionsHaveBeenSelected = isEditingTimetable
+      ? !numberOfSectionsData ||
+        !offeringsData ||
+        totalNumberOfSelectedSections === totalNumberOfRequiredSections
+      : totalNumberOfSelectedSections === totalNumberOfRequiredSections;
 
     useEffect(() => {
       if (!isEditingTimetable) {
@@ -259,13 +267,20 @@ const Calendar = React.memo<CalendarProps>(
     };
 
     const handleUpdate = async () => {
+      const timetableTitle = timetableTitleRef.current?.value ?? "";
       setShowLoadingPage(true);
+
       const offeringIdsToDelete = oldOfferingIds.filter(
         (offeringId) => !newOfferingIds.includes(offeringId),
       );
       const offeringIdsToAdd = newOfferingIds.filter(
         (offeringId) => !oldOfferingIds.includes(offeringId),
       );
+      if (offeringIdsToAdd.length === 0 && offeringIdsToDelete.length === 0) {
+        setUpdateErrorMessage("You have made no changes to the timetable!");
+        setShowLoadingPage(false);
+        return;
+      }
       // Delete course events
       for (const offeringId of offeringIdsToDelete) {
         const { error: deleteError } = await deleteEvent({
@@ -319,12 +334,23 @@ const Calendar = React.memo<CalendarProps>(
           console.error(restrictionError);
         }
       }
+
+      try {
+        await updateTimetable({
+          id: editingTimetableId,
+          timetable_title: timetableTitle,
+        }).unwrap();
+      } catch (error) {
+        setUpdateErrorMessage("You have made no changes to the timetable");
+        setShowLoadingPage(false);
+        return;
+      }
       navigate("/home");
     };
 
     return (
       <div>
-        <h1 className="text-2xl flex flex-row justify-between font-medium tracking-tight mb-8">
+        <h1 className="text-2xl flex flex-row justify-between font-medium tracking-tight mb-4">
           <div>{header}</div>
           <TimetableErrorDialog
             errorMessage={errorMessage}
@@ -378,29 +404,35 @@ const Calendar = React.memo<CalendarProps>(
               </DialogContent>
             </Dialog>
           ) : (
-            <div className="flex gap-2">
-              {isChoosingSectionsManually &&
-                !allOfferingSectionsHaveBeenSelected && (
-                  <p className="text-sm text-red-500 pr-2">
-                    Please select all LEC/TUT/PRA sections for your courses in
-                    order to save your timetable.
-                  </p>
-                )}
+            <div>
+              <div className="flex gap-2">
+                {isChoosingSectionsManually &&
+                  !allOfferingSectionsHaveBeenSelected && (
+                    <p className="text-sm text-red-500 pr-2">
+                      Please select all LEC/TUT/PRA sections for your courses in
+                      order to save your timetable.
+                    </p>
+                  )}
 
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => navigate("/home")}
-              >
-                Cancel Editing
-              </Button>
-              <Button
-                size="sm"
-                disabled={!allOfferingSectionsHaveBeenSelected}
-                onClick={handleUpdate}
-              >
-                Update Timetable
-              </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => navigate("/home")}
+                >
+                  Cancel Editing
+                </Button>
+                <Button
+                  size="sm"
+                  disabled={!allOfferingSectionsHaveBeenSelected}
+                  onClick={handleUpdate}
+                >
+                  Update Timetable
+                </Button>
+              </div>
+              <div className="mt-1 text-sm text-red-500 font-bold">
+                {" "}
+                {updateErrorMessage}{" "}
+              </div>
             </div>
           )}
         </h1>
diff --git a/course-matrix/frontend/src/pages/TimetableBuilder/CreateCustomSetting.tsx b/course-matrix/frontend/src/pages/TimetableBuilder/CreateCustomSetting.tsx
index c37d134f..dd873cd0 100644
--- a/course-matrix/frontend/src/pages/TimetableBuilder/CreateCustomSetting.tsx
+++ b/course-matrix/frontend/src/pages/TimetableBuilder/CreateCustomSetting.tsx
@@ -102,7 +102,7 @@ const CreateCustomSetting = ({
     const val = form
       ?.getValues("restrictions")
       .some((r) => r.type === "Days Off");
-    console.log(val);
+    // console.log(val);
     return val;
   };
 
@@ -110,7 +110,7 @@ const CreateCustomSetting = ({
     const val = form
       ?.getValues("restrictions")
       .some((r) => r.type === "Max Gap");
-    console.log(val);
+    // console.log(val);
     return val;
   };
 
@@ -255,6 +255,36 @@ const CreateCustomSetting = ({
                                 }}
                               />
                             ))}
+                            <FormField
+                              control={restrictionForm.control}
+                              name="days"
+                              render={({ field }) => {
+                                return (
+                                  <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                                    <FormControl>
+                                      <Checkbox
+                                        checked={
+                                          field.value?.length ===
+                                          daysOfWeek.length
+                                        }
+                                        onCheckedChange={(checked) => {
+                                          return checked
+                                            ? field.onChange(
+                                                daysOfWeek.map(
+                                                  (item) => item.id,
+                                                ),
+                                              )
+                                            : field.onChange([]);
+                                        }}
+                                      />
+                                    </FormControl>
+                                    <FormLabel className="font-normal">
+                                      All Days
+                                    </FormLabel>
+                                  </FormItem>
+                                );
+                              }}
+                            />
                           </div>
                           <FormMessage />
                         </FormItem>
diff --git a/course-matrix/frontend/src/pages/TimetableBuilder/GeneratedCalendars.tsx b/course-matrix/frontend/src/pages/TimetableBuilder/GeneratedCalendars.tsx
index 01e97258..4b9d392c 100644
--- a/course-matrix/frontend/src/pages/TimetableBuilder/GeneratedCalendars.tsx
+++ b/course-matrix/frontend/src/pages/TimetableBuilder/GeneratedCalendars.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/utils/semester-utils";
 import { courseEventStyles } from "@/constants/calendarConstants";
 import { createEventModalPlugin } from "@schedule-x/event-modal";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useGetOfferingEventsQuery } from "@/api/offeringsApiSlice";
 import { Button } from "@/components/ui/button";
 import {
@@ -107,7 +107,7 @@ export const GeneratedCalendars = React.memo<GeneratedCalendarsProps>(
 
     const { data: courseEventsData, isLoading } = useGetOfferingEventsQuery({
       offering_ids: currentTimetableOfferings
-        .map((offering) => offering.id)
+        ?.map((offering) => offering.id)
         .join(","),
       semester_start_date: semesterStartDate,
       semester_end_date: semesterEndDate,
@@ -200,6 +200,10 @@ export const GeneratedCalendars = React.memo<GeneratedCalendarsProps>(
       isResponsive: false,
     });
 
+    useEffect(() => {
+      setCurrentTimetableIndex(0);
+    }, [generatedTimetables]);
+
     return (
       <>
         <div>
diff --git a/course-matrix/frontend/src/pages/TimetableBuilder/OfferingInfo.tsx b/course-matrix/frontend/src/pages/TimetableBuilder/OfferingInfo.tsx
index 1b42a9f0..2c513ff9 100644
--- a/course-matrix/frontend/src/pages/TimetableBuilder/OfferingInfo.tsx
+++ b/course-matrix/frontend/src/pages/TimetableBuilder/OfferingInfo.tsx
@@ -245,7 +245,7 @@ const OfferingInfo = ({ course, semester, form }: OfferingInfoProps) => {
                           <SelectItem
                             value={lectureOfferingIds.join(",")}
                             className={
-                              "font-bold bg-yellow-300 focus:bg-yellow-500 cursor-pointer"
+                              "font-bold bg-green-100/50 focus:bg-green-200 cursor-pointer"
                             }
                           >
                             {section}
@@ -257,7 +257,7 @@ const OfferingInfo = ({ course, semester, form }: OfferingInfoProps) => {
                             return (
                               <SelectLabel
                                 key={id}
-                                className={"bg-yellow-100 font-light"}
+                                className={"font-light"}
                               >{`${offering?.day}, ${offering?.start} - ${offering?.end}`}</SelectLabel>
                             );
                           })}
@@ -309,7 +309,7 @@ const OfferingInfo = ({ course, semester, form }: OfferingInfoProps) => {
                           <SelectItem
                             value={tutorialOfferingIds.join(",")}
                             className={
-                              "font-bold bg-yellow-300 focus:bg-yellow-500 cursor-pointer"
+                              "font-bold bg-green-100/50 focus:bg-green-200 cursor-pointer"
                             }
                           >
                             {section}
@@ -321,7 +321,7 @@ const OfferingInfo = ({ course, semester, form }: OfferingInfoProps) => {
                             return (
                               <SelectLabel
                                 key={id}
-                                className={"bg-yellow-100 font-light"}
+                                className={"font-light"}
                               >{`${offering?.day}, ${offering?.start} - ${offering?.end}`}</SelectLabel>
                             );
                           })}
@@ -375,7 +375,7 @@ const OfferingInfo = ({ course, semester, form }: OfferingInfoProps) => {
                           <SelectItem
                             value={practicalOfferingIds.join(",")}
                             className={
-                              "font-bold bg-yellow-300 focus:bg-yellow-500 cursor-pointer"
+                              "font-bold bg-green-100/50 focus:bg-green-200 cursor-pointer"
                             }
                           >
                             {section}
@@ -387,7 +387,7 @@ const OfferingInfo = ({ course, semester, form }: OfferingInfoProps) => {
                             return (
                               <SelectLabel
                                 key={id}
-                                className={"bg-yellow-100 font-light"}
+                                className={"font-light"}
                               >{`${offering?.day}, ${offering?.start} - ${offering?.end}`}</SelectLabel>
                             );
                           })}
diff --git a/course-matrix/frontend/src/pages/TimetableBuilder/TimetableBuilder.tsx b/course-matrix/frontend/src/pages/TimetableBuilder/TimetableBuilder.tsx
index a1b1b711..67cfb502 100644
--- a/course-matrix/frontend/src/pages/TimetableBuilder/TimetableBuilder.tsx
+++ b/course-matrix/frontend/src/pages/TimetableBuilder/TimetableBuilder.tsx
@@ -362,13 +362,15 @@ const TimetableBuilder = () => {
                 <Button size="sm" variant="outline" onClick={handleReset}>
                   Reset
                 </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => setOpenShareDialog(true)}
-                >
-                  Share
-                </Button>
+                {isEditingTimetable && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setOpenShareDialog(true)}
+                  >
+                    Share
+                  </Button>
+                )}
                 {isEditingTimetable && (
                   <ShareDialog
                     open={openShareDialog}
@@ -459,9 +461,12 @@ const TimetableBuilder = () => {
                         <Checkbox
                           id="manual-selection"
                           checked={isChoosingSectionsManually}
-                          onCheckedChange={(checked) =>
-                            setIsChoosingSectionsManually(checked === true)
-                          }
+                          onCheckedChange={(checked) => {
+                            setIsChoosingSectionsManually(checked === true);
+                            if (checked) {
+                              form.setValue("restrictions", []);
+                            }
+                          }}
                         />
                         <label
                           htmlFor="manual-selection"
@@ -524,78 +529,85 @@ const TimetableBuilder = () => {
                     )}
                   </div>
                 </div>
-
-                <div className="flex gap-12 items-end">
-                  <div className="flex flex-col gap-2">
-                    <h2 className="text-lg">Custom Settings</h2>
-                    <p className="text-sm text-gray-500">
-                      Add additional restrictions to your timetable to
-                      personalize it to your needs.
-                    </p>
-                  </div>
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    type="button"
-                    onClick={() => setIsCustomSettingsOpen(true)}
-                  >
-                    + Add new
-                  </Button>
-                </div>
-
-                <div className="flex flex-col">
-                  <FormField
-                    control={form.control}
-                    name="restrictions"
-                    render={() => (
-                      <FormItem className="pb-2">
-                        <p className="text-sm">
-                          Enabled Restrictions: {enabledRestrictions.length}
+                {(!isChoosingSectionsManually || isEditingTimetable) && (
+                  <>
+                    <div className="flex gap-12 items-end">
+                      <div className="flex flex-col gap-2">
+                        <h2 className="text-lg">Custom Settings</h2>
+                        <p className="text-sm text-gray-500">
+                          {!isEditingTimetable
+                            ? "Add additional restrictions to your timetable to personalize it to your needs."
+                            : "This timetable was created with the following restrictions:"}
                         </p>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <div className="flex gap-2 flex-col">
-                    {enabledRestrictions &&
-                      enabledRestrictions.map((restric, index) => (
-                        <div
-                          key={index}
-                          className="flex p-2 justify-between bg-red-100/50 text-xs rounded-md w-[64%]"
-                        >
-                          {restric.type.startsWith("Restrict") ? (
-                            <p>
-                              <strong>{restric.type}:</strong>{" "}
-                              {restric.startTime
-                                ? formatTime(restric.startTime)
-                                : ""}{" "}
-                              {restric.type === "Restrict Between" ? " - " : ""}{" "}
-                              {restric.endTime
-                                ? formatTime(restric.endTime)
-                                : ""}{" "}
-                              {restric.days?.join(" ")}
-                            </p>
-                          ) : restric.type.startsWith("Days") ? (
-                            <p>
-                              <strong>{restric.type}:</strong> At least{" "}
-                              {restric.numDays} days off
-                            </p>
-                          ) : (
-                            <p>
-                              <strong>{restric.type}:</strong> {restric.maxGap}{" "}
-                              hours
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        type="button"
+                        onClick={() => setIsCustomSettingsOpen(true)}
+                        className={isEditingTimetable ? "hidden" : ""}
+                      >
+                        + Add new
+                      </Button>
+                    </div>
+
+                    <div className="flex flex-col">
+                      <FormField
+                        control={form.control}
+                        name="restrictions"
+                        render={() => (
+                          <FormItem className="pb-2">
+                            <p className="text-sm">
+                              Enabled Restrictions: {enabledRestrictions.length}
                             </p>
-                          )}
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <div className="flex gap-2 flex-col">
+                        {enabledRestrictions &&
+                          enabledRestrictions.map((restric, index) => (
+                            <div
+                              key={index}
+                              className="flex p-2 justify-between bg-red-100/50 text-xs rounded-md w-[64%]"
+                            >
+                              {restric.type.startsWith("Restrict") ? (
+                                <p>
+                                  <strong>{restric.type}:</strong>{" "}
+                                  {restric.startTime
+                                    ? formatTime(restric.startTime)
+                                    : ""}{" "}
+                                  {restric.type === "Restrict Between"
+                                    ? " - "
+                                    : ""}{" "}
+                                  {restric.endTime
+                                    ? formatTime(restric.endTime)
+                                    : ""}{" "}
+                                  {restric.days?.join(" ")}
+                                </p>
+                              ) : restric.type.startsWith("Days") ? (
+                                <p>
+                                  <strong>{restric.type}:</strong> At least{" "}
+                                  {restric.numDays} days off
+                                </p>
+                              ) : (
+                                <p>
+                                  <strong>{restric.type}:</strong>{" "}
+                                  {restric.maxGap} hours
+                                </p>
+                              )}
 
-                          <X
-                            size={16}
-                            className="hover:text-red-500 cursor-pointer"
-                            onClick={() => handleRemoveRestriction(index)}
-                          />
-                        </div>
-                      ))}
-                  </div>
-                </div>
+                              <X
+                                size={16}
+                                className={`hover:text-red-500 cursor-pointer ${isEditingTimetable ? "hidden" : ""}`}
+                                onClick={() => handleRemoveRestriction(index)}
+                              />
+                            </div>
+                          ))}
+                      </div>
+                    </div>
+                  </>
+                )}
 
                 {!isChoosingSectionsManually && (
                   <div className="w-[100px]">
diff --git a/course-matrix/frontend/src/pages/TimetableBuilder/ViewCalendar.tsx b/course-matrix/frontend/src/pages/TimetableBuilder/ViewCalendar.tsx
new file mode 100644
index 00000000..495b08cf
--- /dev/null
+++ b/course-matrix/frontend/src/pages/TimetableBuilder/ViewCalendar.tsx
@@ -0,0 +1,165 @@
+import { ScheduleXCalendar } from "@schedule-x/react";
+import {
+  createCalendar,
+  createViewDay,
+  createViewMonthAgenda,
+  createViewMonthGrid,
+  createViewWeek,
+  viewWeek,
+} from "@schedule-x/calendar";
+// import { createDragAndDropPlugin } from "@schedule-x/drag-and-drop";
+import { createEventModalPlugin } from "@schedule-x/event-modal";
+import "@schedule-x/theme-default/dist/index.css";
+import React from "react";
+import { useGetSharedEventsQuery } from "@/api/eventsApiSlice";
+import { Event, TimetableEvents } from "@/utils/type-utils";
+import {
+  getSemesterStartAndEndDates,
+  getSemesterStartAndEndDatesPlusOneWeek,
+} from "@/utils/semester-utils";
+import { courseEventStyles } from "@/constants/calendarConstants";
+import { parseEvent } from "@/utils/calendar-utils";
+import { useGetUsernameFromUserIdQuery } from "@/api/authApiSlice";
+import { Spinner } from "@/components/ui/spinner";
+import { SemesterIcon } from "@/components/semester-icon";
+
+interface ViewCalendarProps {
+  user_id: string;
+  calendar_id: number;
+  timetable_title: string;
+  semester: string;
+  show_fancy_header: boolean;
+}
+
+const ViewCalendar = React.memo<ViewCalendarProps>(
+  ({ user_id, calendar_id, timetable_title, semester, show_fancy_header }) => {
+    const { data: usernameData } = useGetUsernameFromUserIdQuery(user_id, {
+      skip: calendar_id === -1,
+    });
+    const username = usernameData
+      ? usernameData.trim().length > 0
+        ? usernameData
+        : "John Doe"
+      : "John Doe";
+
+    const semesterStartDate = getSemesterStartAndEndDates(semester).start;
+    const { start: semesterStartDatePlusOneWeek, end: semesterEndDate } =
+      getSemesterStartAndEndDatesPlusOneWeek(semester);
+
+    const { data: sharedEventsData, isLoading: isSharedEventsLoading } =
+      useGetSharedEventsQuery(
+        { user_id, calendar_id },
+        { skip: !user_id || !calendar_id },
+      ) as {
+        data: TimetableEvents;
+        isLoading: boolean;
+      };
+    const sharedEvents = sharedEventsData as TimetableEvents;
+
+    const isLoading = isSharedEventsLoading;
+
+    const courseEvents: Event[] = sharedEvents?.courseEvents ?? [];
+    const userEvents: Event[] = sharedEvents?.userEvents ?? [];
+
+    const courses = [
+      ...new Set(
+        courseEvents.map((event) => event.event_name.split("-")[0].trim()),
+      ),
+    ];
+    const courseToMeetingSectionMap = new Map<string, string[]>();
+    courseEvents.forEach((event) => {
+      const course = event.event_name.split("-")[0].trim();
+      const meetingSection = event.event_name.split("-")[1].trim();
+      if (courseToMeetingSectionMap.has(course)) {
+        const meetingSections = courseToMeetingSectionMap.get(course);
+        if (meetingSections) {
+          courseToMeetingSectionMap.set(course, [
+            ...new Set([...meetingSections, meetingSection]),
+          ]);
+        }
+      } else {
+        courseToMeetingSectionMap.set(course, [meetingSection]);
+      }
+    });
+
+    let index = 1;
+    const courseEventsParsed = courseEvents.map((event) =>
+      parseEvent(index++, event, "courseEvent"),
+    );
+    const userEventsParsed = userEvents.map((event) =>
+      parseEvent(index++, event, "userEvent"),
+    );
+
+    const calendar = createCalendar({
+      views: [
+        createViewDay(),
+        createViewWeek(),
+        createViewMonthGrid(),
+        createViewMonthAgenda(),
+      ],
+      firstDayOfWeek: 0,
+      selectedDate: semesterStartDatePlusOneWeek,
+      minDate: semesterStartDate,
+      maxDate: semesterEndDate,
+      defaultView: viewWeek.name,
+      events: [...courseEventsParsed, ...userEventsParsed],
+      calendars: {
+        courseEvent: courseEventStyles,
+      },
+      plugins: [createEventModalPlugin()],
+      weekOptions: {
+        gridHeight: 600,
+      },
+      dayBoundaries: {
+        start: "06:00",
+        end: "21:00",
+      },
+      isResponsive: false,
+    });
+
+    return isLoading ? (
+      <Spinner />
+    ) : (
+      <div>
+        {!show_fancy_header && (
+          <h1 className="text-2xl flex justify-evenly font-medium tracking-tight mb-4">
+            <div className="flex items-center gap-2">
+              <SemesterIcon semester={semester} size={18} />
+              {timetable_title}
+            </div>
+          </h1>
+        )}
+        {show_fancy_header && (
+          <>
+            <h1 className="text-xl text-center justify-between font-medium tracking-tight mb-4">
+              You are viewing{" "}
+              <span className="text-green-500">{username ?? "John Doe"}'s</span>{" "}
+              timetable named{" "}
+              <span className="text-green-500">{timetable_title}</span> for{" "}
+              <span className="text-green-500">{semester}</span>
+            </h1>
+            <div className="text-sm justify-between tracking-tight mb-4">
+              <b>Courses:</b>{" "}
+              {courses.length === 0 && (
+                <span className="text-sm text-red-500">
+                  This timetable has no courses
+                </span>
+              )}
+              {courses.map((course) => (
+                <span className="text-blue-500 mr-2" key={course}>
+                  {course}{" "}
+                  <span className="text-gray-500">
+                    ({(courseToMeetingSectionMap.get(course) ?? []).join(", ")})
+                  </span>
+                </span>
+              ))}
+            </div>
+          </>
+        )}
+        <ScheduleXCalendar calendarApp={calendar} />
+      </div>
+    );
+  },
+);
+
+export default ViewCalendar;
diff --git a/course-matrix/frontend/src/utils/calendar-utils.ts b/course-matrix/frontend/src/utils/calendar-utils.ts
index cdf73cd9..d26be723 100644
--- a/course-matrix/frontend/src/utils/calendar-utils.ts
+++ b/course-matrix/frontend/src/utils/calendar-utils.ts
@@ -1,4 +1,4 @@
-import { Event } from "@/utils/type-utils";
+import { Event, Timetable } from "@/utils/type-utils";
 
 export function parseEvent(id: number, event: Event, calendarId: string) {
   return {
@@ -19,3 +19,11 @@ export function parseEvent(id: number, event: Event, calendarId: string) {
     calendarId: calendarId,
   };
 }
+
+export function sortTimetablesComparator(a: Timetable, b: Timetable) {
+  if (a.favorite == b.favorite)
+    return b?.updated_at.localeCompare(a?.updated_at);
+  if (a.favorite) return -1;
+  if (b.favorite) return 1;
+  return 0;
+}
diff --git a/course-matrix/frontend/src/utils/convert-timestamp-to-locale-time.ts b/course-matrix/frontend/src/utils/convert-timestamp-to-locale-time.ts
new file mode 100644
index 00000000..35867568
--- /dev/null
+++ b/course-matrix/frontend/src/utils/convert-timestamp-to-locale-time.ts
@@ -0,0 +1,7 @@
+export function convertTimestampToLocaleTime(
+  timestampz: string | number,
+): string {
+  const date = new Date(timestampz);
+
+  return date.toLocaleString(); // Uses system's default locale
+}
diff --git a/course-matrix/frontend/tailwind.config.js b/course-matrix/frontend/tailwind.config.js
index 5ea93599..bdab53a9 100644
--- a/course-matrix/frontend/tailwind.config.js
+++ b/course-matrix/frontend/tailwind.config.js
@@ -78,10 +78,15 @@ export default {
             height: "0",
           },
         },
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 0.4s ease-in-out",
       },
     },
   },