diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx
index 28c2371..b21fd35 100644
--- a/client/src/components/navbar/Navbar.jsx
+++ b/client/src/components/navbar/Navbar.jsx
@@ -1,67 +1,80 @@
 import { Box, Flex, Icon, Link, Text, VStack } from "@chakra-ui/react";
-import { Logo } from "../../assets/logo/Logo";
-import { MdNotifications } from "react-icons/md";
-import { MdSettings } from "react-icons/md";
+
 import { IoMdCalendar } from "react-icons/io";
+import { MdNotifications, MdSettings } from "react-icons/md";
 import { TbInvoice } from "react-icons/tb";
-import './Navbar.css';
 
+import { Logo } from "../../assets/logo/Logo";
+
+import "./Navbar.css";
 
 const Navbar = ({ children }) => {
   const menuItems = [
-    { name: "Programs", path: "/programs", icon: <IoMdCalendar/>},
-    { name: "Invoices", path: "/invoices", icon: <TbInvoice/> },
-    { name: "Notifications", path: "/notifications", icon: <MdNotifications/> },
-    { name: "Settings", path: "/settings", icon:<MdSettings/> }
+    { name: "Programs", path: "/programs", icon: <IoMdCalendar /> },
+    { name: "Invoices", path: "/invoices", icon: <TbInvoice /> },
+    {
+      name: "Notifications",
+      path: "/notifications",
+      icon: <MdNotifications />,
+    },
+    { name: "Settings", path: "/settings", icon: <MdSettings /> },
   ];
 
   return (
     <div id="navbarBody">
-    <Box
-      w="18%"
-      maxW={250}
-      bg="white"
-      boxShadow="lg"
-      bgColor="#F6F6F6"
-      height="100vh"
-      position="fixed"
-    >
-      <Flex
-        justify="center"
-        p={10}
-        pb={7}
+      <Box
+        w="18%"
+        maxW={250}
+        bg="white"
+        boxShadow="lg"
+        bgColor="#F6F6F6"
+        height="100vh"
+        position="fixed"
       >
-        <Logo></Logo>
-      </Flex>
+        <Flex
+          justify="center"
+          p={10}
+          pb={7}
+        >
+          <Logo></Logo>
+        </Flex>
 
-      <VStack
-        spacing={2}
-        align="stretch"
-        px={4}
-      >
-        {menuItems.map((item) => (
-          <div key={item.name} className="navItem">
-            <Link
-              href={item.path}
-              display="flex"
-              alignItems="center"
-              px={4}
-              py={3}
-              rounded="lg"
-              className="navLink"
+        <VStack
+          spacing={2}
+          align="stretch"
+          px={4}
+        >
+          {menuItems.map((item) => (
+            <div
+              key={item.name}
+              className="navItem"
             >
-              <Icon className="navIcon" fontSize="2xl">{item.icon}</Icon>
-              <Text className="navText">{item.name}</Text>
-            </Link>
-          </div>
-        ))}
-      </VStack>
-    </Box>
-    <div style={{width: "100%", marginLeft: "min(18%, 250px)"}}>
-      {children}
-    </div>
+              <Link
+                href={item.path}
+                display="flex"
+                alignItems="center"
+                px={4}
+                py={3}
+                rounded="lg"
+                className="navLink"
+              >
+                <Icon
+                  className="navIcon"
+                  fontSize="2xl"
+                >
+                  {item.icon}
+                </Icon>
+                <Text className="navText">{item.name}</Text>
+              </Link>
+            </div>
+          ))}
+        </VStack>
+      </Box>
+      <div style={{ width: "100%", marginLeft: "min(18%, 250px)" }}>
+        {children}
+      </div>
     </div>
   );
 };
 
-export default Navbar; 
+export default Navbar;
diff --git a/client/src/components/programs/Program.jsx b/client/src/components/programs/Program.jsx
index 876aa78..52e0a7f 100644
--- a/client/src/components/programs/Program.jsx
+++ b/client/src/components/programs/Program.jsx
@@ -1,23 +1,21 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router';
-import { ProgramSummary, Sessions } from './ProgramComponents';
-import Navbar from '../navbar/Navbar';
-import {
-  Box,
-  Text,
-  Flex,
-} from "@chakra-ui/react"
-import { useBackendContext } from '../../contexts/hooks/useBackendContext';
+import { useEffect, useState } from "react";
+
+import { Box, Flex, Text } from "@chakra-ui/react";
+
+import { useParams } from "react-router";
+
+import { useBackendContext } from "../../contexts/hooks/useBackendContext";
+import Navbar from "../navbar/Navbar";
+import { ProgramSummary, Sessions } from "./ProgramComponents";
 
 export const Program = () => {
   const { id } = useParams();
   const { backend } = useBackendContext();
-  const [ program, setProgram ] = useState(null);
-  const [ sessions, setSessions ] = useState(null);
-  const [ roomIds, setRoomIds ] = useState(null);
-  const [ roomNames, setRoomNames] = useState(null);
-  const [ nextBookingInfo, setNextBookingInfo ] = useState(null);
-
+  const [program, setProgram] = useState(null);
+  const [sessions, setSessions] = useState(null);
+  const [roomIds, setRoomIds] = useState(null);
+  const [roomNames, setRoomNames] = useState(null);
+  const [nextBookingInfo, setNextBookingInfo] = useState(null);
 
   const getProgram = async () => {
     try {
@@ -29,8 +27,6 @@ export const Program = () => {
     }
   };
 
-
-
   const getNextBookingInfo = async () => {
     try {
       const nextBooking = {
@@ -38,11 +34,10 @@ export const Program = () => {
         nextRoom: {},
         assignments: {},
         instructors: [],
-        payees: []
+        payees: [],
       };
 
-
-      const nextSession = sessions?.find(session => !session.archived);
+      const nextSession = sessions?.find((session) => !session.archived);
 
       if (!nextSession) {
         console.log("No upcoming sessions found");
@@ -50,24 +45,30 @@ export const Program = () => {
       }
 
       nextBooking.nextSession = nextSession;
-      const roomResponse = await backend.get(`/rooms/${nextBooking.nextSession.roomId}`);
+      const roomResponse = await backend.get(
+        `/rooms/${nextBooking.nextSession.roomId}`
+      );
       nextBooking.nextRoom = roomResponse.data[0];
 
-      const assignmentsResponse = await backend.get(`/assignments/event/${program[0].id}`);
+      const assignmentsResponse = await backend.get(
+        `/assignments/event/${program[0].id}`
+      );
 
       nextBooking.assignments = assignmentsResponse.data;
 
       for (const assignment of assignmentsResponse.data) {
-        const clientResponse = await backend.get(`/clients/${assignment.clientId}`);
+        const clientResponse = await backend.get(
+          `/clients/${assignment.clientId}`
+        );
         const assignmentWithClient = {
           ...assignment,
           clientName: clientResponse.data.name,
-          clientEmail: clientResponse.data.email
+          clientEmail: clientResponse.data.email,
         };
 
-        if (assignment.role === 'instructor') {
+        if (assignment.role === "instructor") {
           nextBooking.instructors.push(assignmentWithClient);
-        } else if (assignment.role === 'payee') {
+        } else if (assignment.role === "payee") {
           nextBooking.payees.push(assignmentWithClient);
         }
       }
@@ -84,9 +85,10 @@ export const Program = () => {
       const sessionsData = sessionsResponse.data;
       setSessions(sessionsData);
       // Get set of room ids
-      const uniqueRoomIds = [...new Set(sessionsData.map(session => session.roomId))];
+      const uniqueRoomIds = [
+        ...new Set(sessionsData.map((session) => session.roomId)),
+      ];
       setRoomIds(uniqueRoomIds);
-
     } catch {
       console.log("From getSessions: ", error);
     }
@@ -105,20 +107,16 @@ export const Program = () => {
     } catch {
       console.log("From getRoomNames: ", error);
     }
-  }
+  };
 
   useEffect(() => {
     getProgram();
     getSessions();
-
-
-
   }, [id]);
 
   useEffect(() => {
     if (roomIds) {
       getRoomNames();
-
     }
   }, [roomIds]);
 
@@ -128,20 +126,19 @@ export const Program = () => {
     }
   }, [program, sessions]);
 
-
-
-
-
-
-
   return (
     <Flex>
-      <Navbar/>
+      <Navbar />
       <Box>
-        <ProgramSummary program={program} bookingInfo={nextBookingInfo}/>
-        <Sessions sessions={sessions} rooms={roomNames}/>
+        <ProgramSummary
+          program={program}
+          bookingInfo={nextBookingInfo}
+        />
+        <Sessions
+          sessions={sessions}
+          rooms={roomNames}
+        />
       </Box>
     </Flex>
   );
 };
-
diff --git a/client/src/components/programs/ProgramComponents.jsx b/client/src/components/programs/ProgramComponents.jsx
index 34c199d..e1fa662 100644
--- a/client/src/components/programs/ProgramComponents.jsx
+++ b/client/src/components/programs/ProgramComponents.jsx
@@ -1,7 +1,6 @@
 import { React, useEffect, useState } from "react";
 
 import {
-  AtSignIcon,
   CalendarIcon,
   CloseIcon,
   DownloadIcon,
@@ -15,34 +14,22 @@ import {
   Button,
   Card,
   CardBody,
-  CardHeader,
   Container,
   Flex,
   FormControl,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
   Heading,
-  HStack,
   Icon,
   IconButton,
   Input,
-  Link,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
   Popover,
-  PopoverAnchor,
-  PopoverArrow,
   PopoverBody,
-  PopoverCloseButton,
   PopoverContent,
-  PopoverFooter,
-  PopoverHeader,
   PopoverTrigger,
   Portal,
-  Slide,
   Stack,
   Table,
   TableContainer,
@@ -52,8 +39,6 @@ import {
   Th,
   Thead,
   Tr,
-  useBoolean,
-  useColorModeValue,
   useDisclosure,
   Wrap,
   WrapItem,
@@ -68,16 +53,11 @@ import {
   StyleSheet,
 } from "@react-pdf/renderer";
 import {
-  Calendar,
   ChevronLeftIcon,
-  ChevronsUpDown,
   EllipsisIcon,
   FileTextIcon,
-  MapPin,
-  SlidersHorizontal,
   UserIcon,
 } from "lucide-react";
-import { useParams } from "react-router";
 import { useNavigate } from "react-router-dom";
 
 import {
@@ -156,7 +136,37 @@ export const ProgramSummary = ({ program, bookingInfo }) => {
 
   // Make sure program data is fetched before rendering
   if (!program || program.length === 0) {
-    return <div>Loading...</div>;
+    return (
+      <Box
+        minH="10vh"
+        py={8}
+      >
+        <Container maxW="90%">
+          <Card
+            shadow="md"
+            border="1px"
+            borderColor="gray.300"
+            borderRadius="15px"
+            width="98%"
+          >
+            <CardBody
+              m={6}
+              textAlign="center"
+            >
+              <Heading
+                size="md"
+                textColor="gray.600"
+              >
+                No Program Available
+              </Heading>
+              <Text color="gray.500">
+                Please select a program to view details.
+              </Text>
+            </CardBody>
+          </Card>
+        </Container>
+      </Box>
+    );
   }
 
   const { nextSession, nextRoom, instructors, payees } = safeBookingInfo;
@@ -414,7 +424,7 @@ export const ProgramSummary = ({ program, bookingInfo }) => {
 };
 
 export const Sessions = ({ sessions, rooms }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure(); 
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const [dateRange, setDateRange] = useState({ start: "", end: "" });
   const [timeRange, setTimeRange] = useState({ start: "", end: "" });
@@ -457,15 +467,14 @@ export const Sessions = ({ sessions, rooms }) => {
   };
 
   // Make sure sessions data is fetched before rendering
-  if (!sessions || sessions.length === 0) {
-    return <div>Loading...</div>; // Possibly change loading indicator
-  }
+  // if (!sessions || sessions.length === 0) {
+  //   return <div>Loading...</div>; // Possibly change loading indicator
+  // }
   // Make sure rooms is fetched before rendering
   if (!rooms || rooms.length === 0) {
     return <div>Loading...</div>; // Possibly change loading indicator
   }
 
-
   const filterSessions = () => {
     return sessions.filter((session) => {
       const sessionDate = new Date(session.date);
@@ -957,65 +966,81 @@ export const Sessions = ({ sessions, rooms }) => {
                   </Tr>
                 </Thead>
                 <Tbody>
-                  {filterSessions().map((session) => (
-                    <Tr key={session.id}>
-                      <Td>
-                        <Box
-                          display="flex"
-                          justifyContent="center"
-                        >
+                  {filterSessions().length > 0 ? (
+                    filterSessions().map((session) => (
+                      <Tr key={session.id}>
+                        <Td>
                           <Box
-                            height="14px"
-                            width="14px"
-                            borderRadius="50%"
-                            bg={
-                              hasTimePassed(session.date)
-                                ? "#DAB434"
-                                : "#0C824D"
-                            }
-                          ></Box>
-                        </Box>
-                      </Td>
-                      <Td>
-                        <Box
-                          display="flex"
-                          justifyContent="center"
-                          alignItems="center"
-                        >
-                          {formatDate(session.date)}
-                        </Box>
-                      </Td>
-                      <Td>
-                        <Box
-                          display="flex"
-                          justifyContent="center"
-                          alignItems="center"
-                        >
-                          {formatTime(session.startTime)} -{" "}
-                          {formatTime(session.endTime)}
-                        </Box>
-                      </Td>
+                            display="flex"
+                            justifyContent="center"
+                          >
+                            <Box
+                              height="14px"
+                              width="14px"
+                              borderRadius="50%"
+                              bg={
+                                hasTimePassed(session.date)
+                                  ? "#DAB434"
+                                  : "#0C824D"
+                              }
+                            ></Box>
+                          </Box>
+                        </Td>
+                        <Td>
+                          <Box
+                            display="flex"
+                            justifyContent="center"
+                            alignItems="center"
+                          >
+                            {formatDate(session.date)}
+                          </Box>
+                        </Td>
+                        <Td>
+                          <Box
+                            display="flex"
+                            justifyContent="center"
+                            alignItems="center"
+                          >
+                            {formatTime(session.startTime)} -{" "}
+                            {formatTime(session.endTime)}
+                          </Box>
+                        </Td>
+                        <Td>
+                          <Box
+                            display="flex"
+                            justifyContent="center"
+                            alignItems="center"
+                          >
+                            {rooms.get(session.roomId)}
+                          </Box>
+                        </Td>
+                        <Td>
+                          {/* Slight "bug": hovering shows shadow larger than button */}
+                          <IconButton
+                            height="30px"
+                            width="30px"
+                            rounded="full"
+                            variant="ghost"
+                            icon={<Icon as={sessionsEllipsis} />}
+                          />
+                        </Td>
+                      </Tr>
+                    ))
+                  ) : (
+                    <Tr>
                       <Td>
                         <Box
-                          display="flex"
-                          justifyContent="center"
-                          alignItems="center"
+                          textAlign="center"
+                          py={6}
+                          color="gray.500"
+                          fontSize="md"
+                          width={"300px"}
                         >
-                          {rooms.get(session.roomId)}
+                          No sessions available
                         </Box>
                       </Td>
-                      <Td>
-                        {/* Slight "bug": hovering shows shadow larger than button */}
-                        <IconButton
-                          height="30px"
-                          width="30px"
-                          rounded="full"
-                          variant="ghost"
-                          icon={<Icon as={sessionsEllipsis} />}
-                        />
-                      </Td>
                     </Tr>
-                  ))}
+                  )}
                 </Tbody>
               </Table>
             </TableContainer>