diff --git a/src/components/common/SearchResultsTable/searchResultsTable.tsx b/src/components/common/SearchResultsTable/searchResultsTable.tsx
index 8824066b..1bd9e3d0 100644
--- a/src/components/common/SearchResultsTable/searchResultsTable.tsx
+++ b/src/components/common/SearchResultsTable/searchResultsTable.tsx
@@ -58,18 +58,21 @@ function LoadingRow() {
       <TableCell>
         <Checkbox disabled />
       </TableCell>
-      <TableCell component="th" scope="row">
-        <Typography className="w-[20ch] leading-tight text-lg text-gray-600 dark:text-gray-200">
+      <TableCell component="th" scope="row" className="w-full">
+        <Typography className="w-full leading-tight text-lg">
           <Skeleton />
         </Typography>
       </TableCell>
-      <TableCell align="right">
-        <Skeleton variant="rounded" className="rounded-full px-5 py-2 ml-auto">
-          <Typography className="text-base">4.00</Typography>
+      <TableCell align="center">
+        <Skeleton
+          variant="rounded"
+          className="rounded-full px-5 py-2 min-w-16 block mx-auto"
+        >
+          <Typography className="text-base">A+</Typography>
         </Skeleton>
       </TableCell>
-      <TableCell align="right">
-        <Skeleton variant="rounded" className="rounded-full ml-auto">
+      <TableCell align="center">
+        <Skeleton variant="rounded" className="rounded-full mx-auto">
           <Rating sx={{ fontSize: 25 }} readOnly />
         </Skeleton>
       </TableCell>
@@ -116,10 +119,9 @@ function Row({
     <>
       <TableRow
         onClick={() => setOpen(!open)} // opens/closes the card by clicking anywhere on the row
-        sx={{ '& > *': { borderBottom: 'unset' } }}
         className="cursor-pointer"
       >
-        <TableCell>
+        <TableCell className="border-b-0">
           <Tooltip
             title={open ? 'Minimize Result' : 'Expand Result'}
             placement="top"
@@ -134,7 +136,7 @@ function Row({
             </IconButton>
           </Tooltip>
         </TableCell>
-        <TableCell>
+        <TableCell className="border-b-0">
           <Tooltip
             title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
             placement="top"
@@ -156,12 +158,12 @@ function Row({
             />
           </Tooltip>
         </TableCell>
-        <TableCell component="th" scope="row">
+        <TableCell component="th" scope="row" className="w-full border-b-0">
           <Typography
             onClick={
               (e) => e.stopPropagation() // prevents opening/closing the card when clicking on the text
             }
-            className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text"
+            className="leading-tight text-lg text-gray-600 dark:text-gray-200 cursor-text w-fit"
           >
             {searchQueryLabel(course) +
               ((typeof course.profFirst === 'undefined' &&
@@ -172,16 +174,16 @@ function Row({
                 : '')}
           </Typography>
         </TableCell>
-        <TableCell align="right">
+        <TableCell align="center" className="border-b-0">
           {((typeof grades === 'undefined' || grades.state === 'error') && (
             <></>
           )) ||
             (grades.state === 'loading' && (
               <Skeleton
                 variant="rounded"
-                className="rounded-full px-5 py-2 ml-auto"
+                className="rounded-full px-5 py-2 w-16 block mx-auto"
               >
-                <Typography className="text-base">A</Typography>
+                <Typography className="text-base w-6">A+</Typography>
               </Skeleton>
             )) ||
             (grades.state === 'done' && (
@@ -190,7 +192,7 @@ function Row({
                 placement="top"
               >
                 <Typography
-                  className="text-base text-black text-center rounded-full px-5 py-2 w-16 block"
+                  className="text-base text-black text-center rounded-full px-5 py-2 w-16 block mx-auto"
                   sx={{ backgroundColor: gpaToColor(grades.data.gpa) }}
                 >
                   {gpaToLetterGrade(grades.data.gpa)}
@@ -199,10 +201,10 @@ function Row({
             )) ||
             null}
         </TableCell>
-        <TableCell align="right">
+        <TableCell align="center" className="border-b-0">
           {((typeof rmp === 'undefined' || rmp.state === 'error') && <></>) ||
             (rmp.state === 'loading' && (
-              <Skeleton variant="rounded" className="rounded-full ml-auto">
+              <Skeleton variant="rounded" className="rounded-full">
                 <Rating sx={{ fontSize: 25 }} readOnly />
               </Skeleton>
             )) ||
diff --git a/src/components/common/SingleProfInfo/singleProfInfo.tsx b/src/components/common/SingleProfInfo/singleProfInfo.tsx
index 5014f7d4..f2b77090 100644
--- a/src/components/common/SingleProfInfo/singleProfInfo.tsx
+++ b/src/components/common/SingleProfInfo/singleProfInfo.tsx
@@ -1,4 +1,4 @@
-import { Grid, Skeleton } from '@mui/material';
+import { Grid2 as Grid, Skeleton } from '@mui/material';
 import Link from 'next/link';
 import React from 'react';
 
@@ -16,56 +16,61 @@ function SingleProfInfo({ rmp }: Props) {
   if (rmp.state === 'loading') {
     return (
       <Grid container spacing={2} className="p-4">
-        <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+        <Grid size={6}>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Professor rating</p>
         </Grid>
-        <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+        <Grid size={6}>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">5.0</p>
+          </Skeleton>
           <p>Difficulty</p>
         </Grid>
-        <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+        <Grid size={6}>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">1,000</p>
+          </Skeleton>
           <p>Ratings given</p>
         </Grid>
-        <Grid item xs={6}>
-          <p className="text-xl font-bold">
-            <Skeleton variant="rounded" width="10%" height={25} />
-          </p>
+        <Grid size={6}>
+          <Skeleton variant="rounded">
+            <p className="text-xl font-bold">99%</p>
+          </Skeleton>
           <p>Would take again</p>
         </Grid>
+        <Grid size={12}>
+          <Skeleton variant="rounded">
+            <p>Visit Rate My Professors</p>
+          </Skeleton>
+        </Grid>
       </Grid>
     );
   }
   return (
     <Grid container spacing={2} className="p-4">
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">{rmp.data.avgRating}</p>
         <p>Professor rating</p>
       </Grid>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">{rmp.data.avgDifficulty}</p>
         <p>Difficulty</p>
       </Grid>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">
           {rmp.data.numRatings.toLocaleString()}
         </p>
         <p>Ratings given</p>
       </Grid>
-      <Grid item xs={6}>
+      <Grid size={6}>
         <p className="text-xl font-bold">
           {rmp.data.wouldTakeAgainPercent.toFixed(0) + '%'}
         </p>
         <p>Would take again</p>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <Link
           href={
             'https://www.ratemyprofessors.com/professor/' + rmp.data.legacyId
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 91c69259..4ba2cfb2 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, Grid } from '@mui/material';
+import { Card, Grid2 as Grid } from '@mui/material';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -746,7 +746,7 @@ export const Dashboard: NextPage = () => {
     contentComponent = (
       <>
         <Grid container spacing={2}>
-          <Grid item xs={12} sm={6} md={6}>
+          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
             <Filters
               manageQuery
               academicSessions={academicSessions}
@@ -754,10 +754,10 @@ export const Dashboard: NextPage = () => {
               addChosenSessions={addChosenSessions}
             />
           </Grid>
-          <Grid item xs={false} sm={6} md={6}></Grid>
+          <Grid size={{ xs: false, sm: 6, md: 6 }}></Grid>
         </Grid>
         <Grid container component="main" wrap="wrap-reverse" spacing={2}>
-          <Grid item xs={12} sm={6} md={6}>
+          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
             <SearchResultsTable
               resultsLoading={results.state}
               includedResults={includedResults}
@@ -768,7 +768,7 @@ export const Dashboard: NextPage = () => {
               removeFromCompare={removeFromCompare}
             />
           </Grid>
-          <Grid item xs={false} sm={6} md={6} className="w-full">
+          <Grid size={{ xs: false, sm: 6, md: 6 }}>
             <div className="sticky top-0 gridsm:max-h-screen overflow-y-auto pt-4">
               <Card>
                 <Carousel names={names} compareLength={compare.length}>