diff --git a/app/actions/getRatings.ts b/app/actions/getRatings.ts
new file mode 100644
index 0000000..996a961
--- /dev/null
+++ b/app/actions/getRatings.ts
@@ -0,0 +1,19 @@
+"use server";
+
+import { cookies } from "next/headers";
+import prisma from "../../lib/prisma";
+import { Prisma } from "@prisma/client";
+import { auth } from "@/lib/auth";
+import { getPlanCookie } from "./actions";
+import { Faculty, Rating } from "@prisma/client";
+
+export async function getRatings(profUid: any) {
+  let profs: Rating[] = [];
+  let ratings = await prisma.rating.findMany({
+    where: {
+      profUid: profUid,
+    },
+  });
+
+  return ratings;
+}
diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
index 947a25c..4900c4f 100644
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -120,11 +120,11 @@ export default async function CalendarPage() {
 
   //let times = await getUniqueStartEndTimes();
   return (
-    <div className="grid grid-cols-10 grid-rows-2 sm:grid-rows-1 p-3 lg:p-4">
-      <div className="sm:h-[75vh] col-span-10 md:col-span-7 font-sans font-normal flex-col">
+    <div className="grid grid-cols-12 grid-rows-2 sm:grid-rows-1 p-3 lg:p-4 gap-5">
+      <div className="sm:h-[83vh] col-span-12 md:col-span-9 font-sans font-normal flex-col sm:px-5">
         <Calendar events={events} startTime={startTime} endTime={endTime} />
       </div>
-      <div className="sm:h-[62vh] col-span-10 sm:col-span-3 sm:ml-[5vw]">
+      <div className="sm:h-[83vh] col-span-12 md:col-span-3 ">
         <CreatePlan initialPlan={planCourses} coursePlans={coursePlans} />
       </div>
     </div>
diff --git a/app/page.tsx b/app/page.tsx
index 43564af..7222e56 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -91,7 +91,12 @@ async function Home(props: any) {
               <Skeleton className="rounded-lg w-8/12 h-fit align-top justify-start" />
             }
           >
-            <Filters codes={codes} terms={terms} times={uniqueTimes} />
+            <Filters
+              className=""
+              codes={codes}
+              terms={terms}
+              times={uniqueTimes}
+            />
           </Suspense>
         </div>
         <div className="col-span-12 lg:col-span-7">
@@ -100,7 +105,7 @@ async function Home(props: any) {
               <Search codes={codes} terms={terms} times={uniqueTimes} />
             </div>
 
-            <div className="h-[78vh] overflow-y-scroll overflow-x-clip scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent">
+            <div className="h-[84vh] overflow-y-scroll overflow-x-clip scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent">
               {props.fullCourseList}
             </div>
           </div>
diff --git a/app/profratings/[profuid]/page.tsx b/app/profratings/[profuid]/page.tsx
index 9382c56..a02e186 100644
--- a/app/profratings/[profuid]/page.tsx
+++ b/app/profratings/[profuid]/page.tsx
@@ -1,8 +1,81 @@
-export default async function Page({
+"use client";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Chip,
+  Divider,
+} from "@nextui-org/react";
+import Star from "@mui/icons-material/Star";
+import Image from "next/image";
+
+import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Faculty, Rating } from "@prisma/client";
+import { getProfs, getNumRatings } from "app/actions/getProfs";
+import { getRatings } from "app/actions/getRatings";
+import StarRating from "@mui/material/Rating";
+
+export default function Page({
   params,
 }: {
   params: Promise<{ profuid: string }>;
 }) {
-  const slug = (await params).profuid;
-  return <div> {slug}</div>;
+  const [ratings, setRatings] = useState<Rating[]>([]);
+
+  const getData = useCallback(async () => {
+    const slug = (await params).profuid;
+    const theratings = await getRatings(slug);
+    setRatings(theratings);
+  }, []);
+
+  useEffect(() => {
+    getData();
+  }, [getData]);
+
+  return (
+    <div className="px-2 mt-4">
+      {ratings?.map((rating: Rating) => (
+        <Card key={rating.id}>
+          <CardHeader className="font-semibold">
+            {rating.courseSubject} {rating.courseNumber}
+          </CardHeader>
+
+          <CardBody>
+            <div>Overall: </div>
+            <StarRating
+              className="ml-5"
+              name="overall Rating"
+              value={rating.overallRating}
+              precision={1}
+              readOnly
+              emptyIcon={
+                <Star
+                  style={{ opacity: 0.8, color: "grey" }}
+                  fontSize="inherit"
+                />
+              }
+            />
+
+            <div>Difficulty: </div>
+            <StarRating
+              className="ml-5"
+              name="overall Rating"
+              value={rating.difficulty}
+              precision={1}
+              readOnly
+              emptyIcon={
+                <Star
+                  style={{ opacity: 0.8, color: "grey" }}
+                  fontSize="inherit"
+                />
+              }
+            />
+            <div className="mt-10">{rating.review}</div>
+          </CardBody>
+        </Card>
+      ))}
+    </div>
+  );
 }
diff --git a/app/profs/page.tsx b/app/profs/page.tsx
index a8c2fe8..7354581 100644
--- a/app/profs/page.tsx
+++ b/app/profs/page.tsx
@@ -49,7 +49,7 @@ export default function ProfPage() {
 
   return (
     <>
-      <div className="gap-3  flex-col grid grid-cols-3">
+      <div className="gap-3 flex-col grid lg:grid-cols-3 lg:grid-cols1 mt-5 px-3">
         {profs?.map((prof: any) => <ProfCard key={prof.id} prof={prof} />)}
       </div>
     </>
diff --git a/components/Filters.tsx b/components/Filters.tsx
index 95e1b6e..6b9c89c 100644
--- a/components/Filters.tsx
+++ b/components/Filters.tsx
@@ -54,6 +54,7 @@ export default function Filters(props: any) {
   );
 
   const handleSelectionChange = (e: any) => {
+    console.log(e.target.value);
     setSelectedTerm([e.target.value]);
 
     if (e.target.value) {
@@ -140,18 +141,18 @@ export default function Filters(props: any) {
   const firstLoad = useCallback(async () => {
     let termCookie = cookies.get("termCookie");
     let searchTermCookie = cookies.get("searchTermCookie");
-    setSelectedTerm(searchParams.get("term")?.toString().split(","));
+
     setdotw(searchParams.get("dotw")?.toString().split(","));
     // setSelectedStartTime(searchParams.get("stime")?.toString().split(","));
     if (!termCookie) {
       cookies.set("termCookie", "S2025");
       params.set("term", "S2025");
       replace(`${pathname}?${params.toString()}`);
-      setSelectedTerm(searchParams.get("term")?.toString().split(","));
+      setSelectedTerm(["S2025"]);
     } else {
       params.set("term", termCookie);
-      replace(`${pathname}?${params.toString()}`);
-      setSelectedTerm(searchParams.get("term")?.toString().split(","));
+      await replace(`${pathname}?${params.toString()}`);
+      setSelectedTerm([termCookie]);
     }
   }, []);
 
@@ -162,13 +163,12 @@ export default function Filters(props: any) {
 
   return (
     <>
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 w-full">
         <Select
-          className="col-span-3 lg:col-span-2"
+          className=""
           classNames={inputStyle}
           size={"sm"}
-          defaultSelectedKeys={searchParams.get("term")?.toString()}
-          disallowEmptySelection={true}
+          defaultSelectedKeys={["S2025"]}
           label="Select Term"
           selectedKeys={selectedTerm}
           selectionMode={"single"}
@@ -177,7 +177,7 @@ export default function Filters(props: any) {
           {RenderSelectOptions()}
         </Select>
 
-        <Divider />
+        <Divider className="mt-5 w-50" />
         <div className="mt-5 font-semibold">Days of the Week</div>
         <CheckboxGroup value={dotw} onValueChange={handleDOTWChange}>
           {days.map((day: any) => (
@@ -191,7 +191,7 @@ export default function Filters(props: any) {
         <CheckboxGroup
           value={selectedStartTime}
           onValueChange={handleSTimeChange}
-          className="h-[20vh] overflow-y-scroll"
+          className="h-[32vh] overflow-y-scroll "
         >
           {props.times.startTimes.map((startTime: any) => {
             const time = startTime.slice(0, 2) + ":" + startTime.slice(2);
diff --git a/components/Search.tsx b/components/Search.tsx
index 08bb55e..c0584e9 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -165,8 +165,14 @@ export default function Search(props: any) {
         size={"lg"}
         className="text-[16px]"
         endContent={
-          <div className="bg-slate-800 w-12 col-span-1 flex h-12 justify-center -mr-5 rounded-e-xl ">
-            <SearchIcon className="align-middle mt-auto mb-auto flex" />
+          <div
+            className="bg-slate-400 dark:bg-slate-800 w-12 col-span-1 flex h-12 justify-center -mr-5 rounded-e-xl "
+            style={{ color: "white" }}
+          >
+            <SearchIcon
+              color="inherit"
+              className="align-middle mt-auto mb-auto flex  "
+            />
           </div>
         }
         defaultValue={searchParams.get("query")?.toString()}
@@ -186,9 +192,8 @@ export default function Search(props: any) {
             "dark:bg-default/60",
             "backdrop-blur-xl",
             "backdrop-saturate-200",
-            "hover:bg-light_foreground/10",
             "dark:hover:bg-default/70",
-            "group-data-[focus=true]:bg-default-200/50",
+
             "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 08c7ea3..3e35afd 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -128,9 +128,11 @@ export const Navbar = (props: any) => {
             ))}
           </NavbarContent>
         </NavbarContent>
-        <NavbarContent className="lg:basis-full lg:flex hidden lg:w-full">
-          <Search />
-        </NavbarContent>
+        {pathname === "/" ? (
+          <NavbarContent className="lg:basis-full lg:flex hidden lg:w-full">
+            <Search />
+          </NavbarContent>
+        ) : null}
 
         <NavbarContent
           className="hidden lg:flex basis-1/5 lg:basis-full"
@@ -138,25 +140,34 @@ export const Navbar = (props: any) => {
         >
           <NavbarItem>
             {status === "authenticated" ? (
-              <Dropdown>
+              <Dropdown
+                classNames={{
+                  content:
+                    "py-1 px-1 border border-default-200 bg-light_foreground",
+                }}
+              >
                 <DropdownTrigger>
                   <Button
                     variant="flat"
                     className="text-primary border-primary"
-                    size={"sm"}
+                    size={"md"}
                   >
                     <AccountCircleIcon className="fill-primary " />
-                    <div className="text-foreground ">
+                    <div className="text-foreground font-medium ">
                       {session.user?.name || "Account"}
                     </div>
                   </Button>
                 </DropdownTrigger>
-                <DropdownMenu aria-label="Static Actions">
+                <DropdownMenu aria-label="Sign out button">
                   {/* Causes an awful error if rendered conditionally */}
                   {/* <DropdownItem key="admin" href="/admin">
                     Admin
                   </DropdownItem> */}
-                  <DropdownItem key="signOut" onPress={() => signOut()}>
+                  <DropdownItem
+                    className="text-center "
+                    key="signOut"
+                    onPress={() => signOut()}
+                  >
                     Sign Out
                   </DropdownItem>
                 </DropdownMenu>
diff --git a/components/profs/ProfCard.tsx b/components/profs/ProfCard.tsx
index 4f83eec..f19f60c 100644
--- a/components/profs/ProfCard.tsx
+++ b/components/profs/ProfCard.tsx
@@ -72,8 +72,7 @@ export default function ProfCard(props: any) {
 
         <CardBody className="pt-0 pl-6 ">
           <div className="flex justify-between flex-row gap-3">
-            {props.prof.avgRating == null ? null : props.prof.avgRating >=
-              1.5 ? (
+            {props.prof?.avgRating != null && props.prof.avgRating > 4 ? (
               <div
                 className={`flex 0 bg-green-500 w-16 h-16 items-center justify-center rounded-md`}
               >
@@ -82,6 +81,37 @@ export default function ProfCard(props: any) {
                 </div>
               </div>
             ) : null}
+            {props.prof?.avgRating != null &&
+            props.prof.avgRating <= 4 &&
+            props.prof.avgRating >= 3 ? (
+              <div
+                className={`flex 0 bg-yellow-500 w-16 h-16 items-center justify-center rounded-md`}
+              >
+                <div className="font-black text-3xl">
+                  {props.prof.avgRating.toFixed(1)}
+                </div>
+              </div>
+            ) : null}
+            {props.prof?.avgRating != null &&
+            props.prof.avgRating < 3 &&
+            props.prof.avgRating >= 2 ? (
+              <div
+                className={`flex 0 bg-orange-500 w-16 h-16 items-center justify-center rounded-md`}
+              >
+                <div className="font-black text-3xl">
+                  {props.prof.avgRating.toFixed(1)}
+                </div>
+              </div>
+            ) : null}
+            {props.prof?.avgRating != null && props.prof.avgRating < 2 ? (
+              <div
+                className={`flex 0 bg-red-500 w-16 h-16 items-center justify-center rounded-md`}
+              >
+                <div className="font-black text-3xl">
+                  {props.prof.avgRating.toFixed(1)}
+                </div>
+              </div>
+            ) : null}
           </div>
           <div className="mt-2">
             {props.prof.numRatings}{" "}