diff --git a/client/src/components/CourseInfo.tsx b/client/src/components/CourseInfo.tsx
index af783257..832c4351 100644
--- a/client/src/components/CourseInfo.tsx
+++ b/client/src/components/CourseInfo.tsx
@@ -1,62 +1,131 @@
 import { ExternalLink } from 'react-feather';
-
+import { HiChartBar, HiChartPie } from 'react-icons/hi';
+import { useState } from 'react';
 import { Course } from '../model/Course';
 import { CourseTerms } from './CourseTerms';
 import { RatingInfo } from './RatingInfo';
-
-type ChartsProps = {
-  numReviews?: number;
-  rating: number;
-  difficulty: number;
-};
-
-const Charts = ({ numReviews, rating, difficulty }: ChartsProps) => {
-  if (numReviews === undefined) return null;
-
-  return numReviews ? (
-    <>
-      <RatingInfo title={'Rating'} rating={rating} />
-      <RatingInfo title={'Difficulty'} rating={difficulty} />
-    </>
-  ) : (
-    <div className='w-[50%] text-left text-gray-700 dark:text-gray-200 md:text-center'>
-      No reviews have been left for this course yet. Be the first!
-    </div>
-  );
-};
+import { Review } from '../model/Review';
+import { countRatings } from '../lib/utils';
 
 type CourseInfoProps = {
   course: Course;
-  rating: number;
-  difficulty: number;
-  numReviews?: number;
+  reviews: Review[];
 };
 
-export const CourseInfo = ({
-  course,
-  rating,
-  difficulty,
-  numReviews,
-}: CourseInfoProps) => {
+export const CourseInfo = ({ course, reviews }: CourseInfoProps) => {
+  const ratingMap: number[] = countRatings('rating', reviews);
+  const difficultyMap: number[] = countRatings('difficulty', reviews);
+  const numReviews = reviews.length;
+
+  const [chartType, setChartType] = useState<'pie' | 'histogram'>('pie');
+
   return (
-    <div className='flex w-full flex-row rounded-md bg-slate-50 p-6 dark:bg-neutral-800 md:mt-10'>
-      <div className='m-4 space-y-3 md:m-4 md:w-1/2'>
-        <div className='flex flex-row space-x-2 align-middle'>
-          <h1 className='text-4xl font-semibold text-gray-800 dark:text-gray-200'>
-            {course._id}
-          </h1>
-          {course.url ? (
-            <a
-              href={course.url}
-              className='my-auto dark:text-gray-200'
-              target='_blank'
-            >
-              <ExternalLink
-                size={20}
-                className='ml-1 transition-colors duration-300 hover:stroke-red-600'
+    <div className='flex justify-center'>
+      <div className='mx-8 flex w-screen flex-row rounded-md bg-slate-50 p-6 dark:bg-neutral-800 md:mt-10'>
+        <div className='flex flex-1 flex-col md:flex-row'>
+          <div className='m-4 flex w-fit flex-col space-y-3 md:m-4 md:w-1/2'>
+            <div className='flex flex-row space-x-2 align-middle'>
+              <h1 className='break-words text-4xl font-semibold text-gray-800 dark:text-gray-200'>
+                {course._id}
+              </h1>
+              {course.url ? (
+                <a
+                  href={course.url}
+                  className='my-auto dark:text-gray-200'
+                  target='_blank'
+                >
+                  <ExternalLink
+                    size={20}
+                    className='ml-1 transition-colors duration-300 hover:stroke-red-600'
+                  />
+                </a>
+              ) : null}
+            </div>
+            <h2 className='text-3xl text-gray-800 dark:text-gray-200'>
+              {course.title}
+            </h2>
+            <div className='m-4 mx-auto flex w-full flex-col items-center justify-center space-y-3 md:hidden'>
+              <RatingInfo
+                title={'Rating'}
+                chartType={chartType}
+                ratings={ratingMap}
+                numReviews={numReviews}
+              />
+              <RatingInfo
+                title={'Difficulty'}
+                chartType={chartType}
+                ratings={difficultyMap}
+                numReviews={numReviews}
+              />
+              <div className='mx-auto flex flex-row md:hidden'>
+                <HiChartPie
+                  className={classNames(
+                    'm-2 mr-2 cursor-pointer ',
+                    chartType === 'pie'
+                      ? 'text-red-600 dark:text-red-600'
+                      : 'text-neutral-800 dark:text-gray-200'
+                  )}
+                  onClick={() => setChartType('pie')}
+                  size={30}
+                />
+                <HiChartBar
+                  className={classNames(
+                    'm-2 mr-2 cursor-pointer ',
+                    chartType === 'histogram'
+                      ? 'text-red-600 dark:text-red-600'
+                      : 'text-neutral-800 dark:text-gray-200'
+                  )}
+                  onClick={() => setChartType('histogram')}
+                  size={30}
+                />
+              </div>
+            </div>
+            <CourseTerms course={course} variant='large' />
+            <p className='break-words text-gray-500 dark:text-gray-400'>
+              {course.description}
+            </p>
+            <p className='text-sm text-gray-500 dark:text-gray-400'>
+              {numReviews} reviews
+            </p>
+          </div>
+          <div className='mx-auto my-auto flex w-1/2 flex-col'>
+            <div className='m-4 mx-auto hidden h-full w-full flex-col items-center justify-center space-y-5 md:flex'>
+              <RatingInfo
+                title={'Rating'}
+                chartType={chartType}
+                ratings={ratingMap}
+                numReviews={numReviews}
+              />
+              <RatingInfo
+                chartType={chartType}
+                title={'Difficulty'}
+                ratings={difficultyMap}
+                numReviews={numReviews}
+              />
+            </div>
+            <div className='mx-auto mt-auto hidden md:flex'>
+              <HiChartPie
+                className={classNames(
+                  'm-2 mr-2 cursor-pointer ',
+                  chartType === 'pie'
+                    ? 'text-red-600 dark:text-red-600'
+                    : 'text-neutral-800 dark:text-gray-200'
+                )}
+                onClick={() => setChartType('pie')}
+                size={30}
+              />
+              <HiChartBar
+                className={classNames(
+                  'm-2 ml-2 cursor-pointer ',
+                  chartType === 'histogram'
+                    ? 'text-red-600 dark:text-red-600'
+                    : 'text-neutral-800 dark:text-gray-200'
+                )}
+                onClick={() => setChartType('histogram')}
+                size={30}
               />
-            </a>
-          ) : null}
+            </div>
+          </div>
         </div>
         <h2 className='text-3xl text-gray-800 dark:text-gray-200'>
           {course.title}
diff --git a/client/src/components/RatingHistogram.tsx b/client/src/components/RatingHistogram.tsx
new file mode 100644
index 00000000..55617bb4
--- /dev/null
+++ b/client/src/components/RatingHistogram.tsx
@@ -0,0 +1,61 @@
+import {
+  Chart,
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  Tooltip,
+} from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+
+Chart.register(LinearScale, CategoryScale, BarElement, Tooltip);
+
+export const RatingHistogram = ({ ratings }: { ratings: number[] }) => {
+  const data = {
+    labels: [5, 4, 3, 2, 1],
+    datasets: [
+      {
+        data: ratings,
+        backgroundColor: '#dc2626',
+        borderWidth: 0,
+      },
+    ],
+  };
+
+  const options = {
+    indexAxis: 'y',
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: (context: any) => {
+            const count = ratings[context.dataIndex];
+            return `Number of ratings: ${count}`;
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        beginAtZero: true,
+        max: Math.max(...ratings) + 1,
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          precision: 0,
+        },
+      },
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+  } as const;
+
+  return (
+    <div className='h-full max-w-full'>
+      <Bar data={data} options={options} />
+    </div>
+  );
+};
diff --git a/client/src/components/RatingInfo.tsx b/client/src/components/RatingInfo.tsx
index d1b652b9..16df7e9a 100644
--- a/client/src/components/RatingInfo.tsx
+++ b/client/src/components/RatingInfo.tsx
@@ -1,17 +1,50 @@
 import { RatingPieChart } from './RatingPieChart';
+import { RatingHistogram } from './RatingHistogram';
+import _ from 'lodash';
 
-type RatingInfoProps = {
+export const RatingInfo = ({
+  title,
+  chartType,
+  numReviews,
+  ratings,
+  content,
+}: {
   title: string;
-  rating: number;
-};
+  chartType: 'pie' | 'histogram';
+  numReviews: number;
+  ratings: number[];
+  content?: string;
+}) => {
+  const averageRating =
+    _.sum(ratings.map((value, index) => value * (index + 1))) / numReviews;
+  const pieChart = (
+    <div className='mx-1 pt-1'>
+      <RatingPieChart averageRating={averageRating} />
+    </div>
+  );
+
+  const histogramChart = (
+    <div className='mx-4'>
+      <RatingHistogram ratings={ratings} />
+    </div>
+  );
 
-export const RatingInfo = ({ title, rating }: RatingInfoProps) => {
   return (
-    <div className='w-full lg:w-3/4'>
-      <h1 className='text-center text-xl font-semibold text-gray-800 dark:text-gray-200'>
+    <div className='w-full md:px-8 lg:w-3/4 lg:p-0'>
+      <h1 className='mb-3 text-center text-xl font-semibold text-gray-800 dark:text-gray-200'>
         {title}
       </h1>
-      <RatingPieChart rating={rating} />
+      {numReviews > 0 ? (
+        chartType === 'pie' ? (
+          pieChart
+        ) : (
+          histogramChart
+        )
+      ) : (
+        <div className='text-left text-gray-700 dark:text-gray-200 md:text-center'>
+          {content ?? 'No reviews have been left yet. Be the first!'}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/client/src/components/RatingPieChart.tsx b/client/src/components/RatingPieChart.tsx
index e896e28d..8b679f77 100644
--- a/client/src/components/RatingPieChart.tsx
+++ b/client/src/components/RatingPieChart.tsx
@@ -1,28 +1,41 @@
-import { PieChart } from 'react-minimal-pie-chart';
+import { Chart, ArcElement } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
 
-type RatingPieChartProps = {
-  rating: number;
-};
+Chart.register(ArcElement);
+
+export const RatingPieChart = ({
+  averageRating,
+}: {
+  averageRating: number;
+}) => {
+  const data = {
+    labels: ['Average Rating', 'Remaining'],
+    datasets: [
+      {
+        data: [averageRating, 5 - averageRating],
+        backgroundColor: ['#dc2626', '#e4e4e7'],
+        borderWidth: 0,
+      },
+    ],
+  };
+
+  const options = {
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    cutout: '67%', // The size of the inner circle
+    maintainAspectRatio: false,
+    responsive: true,
+  };
 
-export const RatingPieChart = ({ rating }: RatingPieChartProps) => {
   return (
     <div className='flex flex-col'>
-      <div className='relative z-10 mx-auto my-5 flex h-1/2 w-3/5 rounded-full '>
-        <PieChart
-          data={[
-            {
-              value: rating,
-              color: '#dc2626',
-            },
-            {
-              value: 5 - rating,
-              color: '#e4e4e7',
-            },
-          ]}
-          lineWidth={20}
-        />
-        <div className='absolute inset-0 z-20 m-auto flex w-10/12 items-center justify-center text-xl font-semibold text-gray-700 dark:text-gray-300'>
-          {Math.round(rating * 100) / 100} / 5
+      <div className='relative z-10 mx-auto flex h-1/2 w-3/5 rounded-full'>
+        <Doughnut data={data} options={options} />
+        <div className='text-l absolute inset-0 z-20 mx-auto my-auto flex w-10/12 items-center justify-center font-semibold text-gray-700 dark:text-gray-300'>
+          {Math.round(averageRating * 100) / 100} / 5
         </div>
       </div>
     </div>
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
index 9d762478..686a4389 100644
--- a/client/src/lib/utils.ts
+++ b/client/src/lib/utils.ts
@@ -1,6 +1,7 @@
 import { Course } from '../model/Course';
 import { Instructor } from '../model/Instructor';
 import { Schedule } from '../model/Schedule';
+import { Review } from '../model/Review';
 
 export const uniqueTermInstructors = (course: Course) => {
   const termInstructors = course.instructors.filter((i) =>
@@ -72,3 +73,23 @@ export const sortSchedulesByBlocks = (schedules: Schedule[]) => {
 export const getUrl = (): string => {
   return import.meta.env.VITE_API_URL ?? '';
 };
+
+
+export const countRatings = (
+  type: 'rating' | 'difficulty',
+  reviews: Review[]
+) => {
+  const ratings: number[] = [0, 0, 0, 0, 0];
+  const target = (r: Review) => {
+    switch (type) {
+      case 'rating':
+        return r.rating;
+      case 'difficulty':
+        return r.difficulty;
+    }
+  };
+
+  reviews.forEach((r: Review) => ratings[target(r) - 1]++);
+
+  return ratings;
+};
diff --git a/client/src/pages/CoursePage.tsx b/client/src/pages/CoursePage.tsx
index 4c42fa38..19f3f6a7 100644
--- a/client/src/pages/CoursePage.tsx
+++ b/client/src/pages/CoursePage.tsx
@@ -32,7 +32,7 @@ export const CoursePage = () => {
   const [addReviewOpen, setAddReviewOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
   const [alertStatus, setAlertStatus] = useState<AlertStatus | null>(null);
-  const [allReviews, setAllReviews] = useState<Review[] | undefined>(undefined);
+  const [allReviews, setAllReviews] = useState<Review[]>([]);
   const [course, setCourse] = useState<Course>();
   const [editReviewOpen, setEditReviewOpen] = useState(false);
   const [key, setKey] = useState(0);
@@ -122,21 +122,12 @@ export const CoursePage = () => {
     localStorage.removeItem(course._id);
   };
 
-  const userReview = allReviews?.find((r) => r.userId === user?.id);
-
-  const averageRating =
-    _.sumBy(allReviews, (r) => r.rating) / (allReviews ?? []).length;
-
-  const averageDifficulty =
-    _.sumBy(allReviews, (r) => r.difficulty) / (allReviews ?? []).length;
-
+  const userReview = allReviews.find((r) => r.userId === user?.id);
   return (
     <Layout>
       <CourseInfo
         course={course}
-        rating={averageRating}
-        difficulty={averageDifficulty}
-        numReviews={allReviews?.length}
+        reviews={allReviews}
       />
       <SchedulesDisplay course={course} />
       <div className='flex flex-col lg:flex-row'>
diff --git a/client/src/pages/Instructor.tsx b/client/src/pages/Instructor.tsx
index e78bcb0d..fb76d6e7 100644
--- a/client/src/pages/Instructor.tsx
+++ b/client/src/pages/Instructor.tsx
@@ -1,5 +1,8 @@
 import _ from 'lodash';
 import { Fragment, useEffect, useState } from 'react';
+import { HiChartBar, HiChartPie } from 'react-icons/hi';
+import { countRatings } from '../lib/utils';
+import { Instructor as InstructorType } from '../model/Instructor';
 import { Link, useParams } from 'react-router-dom';
 
 import { CourseReview } from '../components/CourseReview';
@@ -7,7 +10,6 @@ import { Layout } from '../components/Layout';
 import { RatingInfo } from '../components/RatingInfo';
 import { useAuth } from '../hooks/useAuth';
 import { fetchClient } from '../lib/fetchClient';
-import { Instructor as InstructorType } from '../model/Instructor';
 import { Review } from '../model/Review';
 import { Loading } from './Loading';
 import { NotFound } from './NotFound';
@@ -18,6 +20,7 @@ export const Instructor = () => {
 
   const [reviews, setReviews] = useState<Review[]>([]);
   const [showAllReviews, setShowAllReviews] = useState(false);
+  const [chartType, setChartType] = useState<'pie' | 'histogram'>('pie');
 
   const [instructor, setInstructor] = useState<
     InstructorType | undefined | null
@@ -41,12 +44,12 @@ export const Instructor = () => {
   if (instructor === undefined) return <Loading />;
   if (instructor === null) return <NotFound />;
 
+  const ratingMap = countRatings('rating', reviews);
+  const difficultyMap = countRatings('difficulty', reviews);
+
   const userReview = reviews.find((r) => r.userId === user?.id);
 
   const uniqueReviews = _.uniqBy(reviews, (r) => r.courseId);
-  const averageRating = _.sumBy(reviews, (r) => r.rating) / reviews.length;
-  const averageDifficulty =
-    _.sumBy(reviews, (r) => r.difficulty) / reviews.length;
 
   return (
     <Layout>
@@ -59,13 +62,41 @@ export const Instructor = () => {
                   {params.name && decodeURIComponent(params.name)}
                 </h1>
               </div>
-              <div className='m-4 mx-auto flex w-fit flex-col items-center justify-center space-y-3 md:hidden'>
-                {uniqueReviews.length ? (
-                  <>
-                    <RatingInfo title='Rating' rating={averageRating} />
-                    <RatingInfo title='Difficulty' rating={averageDifficulty} />
-                  </>
-                ) : null}
+              <div className='m-4 mx-auto flex w-full flex-col items-center justify-center space-y-3 md:hidden'>
+                <RatingInfo
+                  title='Rating'
+                  chartType={chartType}
+                  ratings={ratingMap}
+                  numReviews={reviews.length}
+                />
+                <RatingInfo
+                  title='Difficulty'
+                  chartType={chartType}
+                  ratings={difficultyMap}
+                  numReviews={reviews.length}
+                />
+              </div>
+              <div className='mx-auto flex flex-row md:hidden'>
+                <HiChartPie
+                  className={classNames(
+                    'm-2 mr-2 cursor-pointer ',
+                    chartType === 'pie'
+                      ? 'text-red-600 dark:text-red-600'
+                      : 'text-neutral-800 dark:text-gray-200'
+                  )}
+                  onClick={() => setChartType('pie')}
+                  size={30}
+                />
+                <HiChartBar
+                  className={classNames(
+                    'm-2 mr-2 cursor-pointer ',
+                    chartType === 'histogram'
+                      ? 'text-red-600 dark:text-red-600'
+                      : 'text-neutral-800 dark:text-gray-200'
+                  )}
+                  onClick={() => setChartType('histogram')}
+                  size={30}
+                />
               </div>
               <p className='text-gray-500 dark:text-gray-400'>
                 {uniqueReviews.length ? (
@@ -85,13 +116,43 @@ export const Instructor = () => {
                 )}
               </p>
             </div>
-            <div className='m-4 mx-auto hidden w-fit flex-col items-center justify-center space-y-3 md:m-4 md:flex md:w-1/2 lg:flex-row'>
-              {uniqueReviews.length ? (
-                <>
-                  <RatingInfo title='Rating' rating={averageRating} />
-                  <RatingInfo title='Difficulty' rating={averageDifficulty} />
-                </>
-              ) : null}
+            <div className='flex w-1/2 flex-col'>
+              <div className='m-4 mx-auto hidden w-1/2 flex-col items-center justify-center space-x-3 p-3 md:m-4 md:flex md:w-full lg:flex-row'>
+                <RatingInfo
+                  title='Rating'
+                  chartType={chartType}
+                  ratings={ratingMap}
+                  numReviews={reviews.length}
+                />
+                <RatingInfo
+                  title='Difficulty'
+                  chartType={chartType}
+                  ratings={difficultyMap}
+                  numReviews={reviews.length}
+                />
+              </div>
+              <div className='mx-auto hidden flex-row md:flex'>
+                <HiChartPie
+                  className={classNames(
+                    'm-2 mr-2 cursor-pointer ',
+                    chartType === 'pie'
+                      ? 'text-red-600 dark:text-red-600'
+                      : 'text-neutral-800 dark:text-gray-200'
+                  )}
+                  onClick={() => setChartType('pie')}
+                  size={30}
+                />
+                <HiChartBar
+                  className={classNames(
+                    'm-2 mr-2 cursor-pointer ',
+                    chartType === 'histogram'
+                      ? 'text-red-600 dark:text-red-600'
+                      : 'text-neutral-800 dark:text-gray-200'
+                  )}
+                  onClick={() => setChartType('histogram')}
+                  size={30}
+                />
+              </div>
             </div>
           </div>
         </div>
diff --git a/package-lock.json b/package-lock.json
index 70fd8c39..c0df1566 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,13 @@
         "@fontsource/inter": "^4.5.15",
         "@headlessui/react": "^1.7.13",
         "@heroicons/react": "^2.0.16",
+        "chart.js": "^4.3.0",
         "date-fns": "^2.29.3",
         "formik": "^2.2.9",
         "formik-persist-values": "^1.4.1",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
+        "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
         "react-feather": "^2.0.10",
         "react-icons": "^4.8.0",
@@ -976,6 +978,11 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1872,6 +1879,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.3.0.tgz",
+      "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/check-more-types": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
@@ -5480,6 +5498,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/package.json b/package.json
index 77250654..4af221e4 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,13 @@
     "@fontsource/inter": "^4.5.15",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
+    "chart.js": "^4.3.0",
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",
     "formik-persist-values": "^1.4.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
     "react-icons": "^4.8.0",