diff --git a/src/components/common/WhatsNew/whatsNew.tsx b/src/components/common/WhatsNew/whatsNew.tsx
index 05097ca1..bf1040a6 100644
--- a/src/components/common/WhatsNew/whatsNew.tsx
+++ b/src/components/common/WhatsNew/whatsNew.tsx
@@ -1,4 +1,3 @@
-import InfoIcon from '@mui/icons-material/Info';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { IconButton, Paper, Popover, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
@@ -218,17 +217,16 @@ export function WhatsNewButton() {
 
   return (
     <>
-      <Tooltip title="What's New">
+      <Tooltip title="See What's New in Trends!">
         <IconButton
           className="aspect-square"
           size="medium"
           onClick={handleClick}
           aria-describedby={id}
         >
-          <InfoIcon className="text-4xl mr-1 hidden dark:block" />
-          <InfoOutlinedIcon className="text-4xl mr-1 dark:hidden" />
+          <InfoOutlinedIcon className="text-3xl" />
           {unreadCount > 0 && (
-            <span className="absolute -top-0 -right-0 bg-royal rounded-full h-3 w-3"></span>
+            <span className="absolute -top-0 -right-0 bg-royal dark:bg-cornflower-300 rounded-full h-3 w-3"></span>
           )}
         </IconButton>
       </Tooltip>
diff --git a/src/components/dashboard/Tutorial/Tutorial.tsx b/src/components/dashboard/Tutorial/Tutorial.tsx
new file mode 100644
index 00000000..a56a2e7d
--- /dev/null
+++ b/src/components/dashboard/Tutorial/Tutorial.tsx
@@ -0,0 +1,216 @@
+import type { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import CloseIcon from '@mui/icons-material/Close';
+import { Backdrop, Button, IconButton, Popover } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
+type TutorialPopupProps = {
+  element: Element;
+  open: boolean;
+  incrementStep: () => void;
+  close: () => void;
+  title: string;
+  buttonText: string;
+  anchorOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+  transformOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+  children: ReactJSXElement | string;
+};
+
+const TutorialPopup = ({
+  element,
+  open,
+  incrementStep,
+  close,
+  title,
+  buttonText,
+  anchorOrigin,
+  transformOrigin,
+  children,
+}: TutorialPopupProps) => {
+  useEffect(() => {
+    if (open) {
+      element.classList.add('tutorial-raise');
+      if (element.tagName === 'TR' || element.tagName === 'TD') {
+        element.classList.add('tutorial-table');
+      }
+      //Wait to scroll untill classes applies
+      setTimeout(
+        () => element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }),
+        0,
+      );
+    } else {
+      element.classList.remove('tutorial-raise');
+      element.classList.remove('tutorial-table');
+    }
+    return () => {
+      element.classList.remove('tutorial-raise');
+      element.classList.remove('tutorial-table');
+    };
+  }, [open, element]);
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={element}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transformOrigin}
+      className="pointer-events-auto"
+      disableScrollLock={true}
+      marginThreshold={0}
+    >
+      <div
+        className="p-2 flex flex-col items-start min-w-32 max-w-96"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="flex w-full items-center gap-2 pl-2">
+          <p className="text-lg font-bold">{title}</p>
+          <IconButton onClick={close} className="ml-auto">
+            <CloseIcon />
+          </IconButton>
+        </div>
+        <div className="p-2">{children}</div>
+        <Button
+          variant="contained"
+          className="self-end"
+          onClick={incrementStep}
+        >
+          {buttonText}
+        </Button>
+      </div>
+    </Popover>
+  );
+};
+
+type StepTemplate = {
+  id: string;
+  element?: Element;
+  title: string;
+  content: ReactJSXElement | string;
+  anchorOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+  transformOrigin: {
+    vertical: 'center' | 'bottom' | 'top';
+    horizontal: 'center' | 'left' | 'right';
+  };
+};
+type Step = StepTemplate & { element: Element };
+
+const stepsTemplate: StepTemplate[] = [
+  {
+    id: 'search',
+    title: 'Search',
+    content:
+      "Search for any number of courses and professors and we'll find all the combinations of classes they teach.",
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'RHS',
+    title: 'Overviews and Compare',
+    content: 'See an overview of your search on this side.',
+    anchorOrigin: { vertical: 'top', horizontal: 'left' },
+    transformOrigin: { vertical: 'bottom', horizontal: 'right' },
+  },
+  {
+    id: 'result',
+    title: 'Results',
+    content:
+      'See the average grade for a course and Rate My Professors score here.',
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'actions',
+    title: 'More Information & Compare',
+    content: (
+      <>
+        <p>Open a result for more detailed information.</p>
+        <p>Click the checkbox to add an item to the compare tab.</p>
+      </>
+    ),
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'filters',
+    title: 'Filters',
+    content: 'Use the filters to show more specific data.',
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top', horizontal: 'center' },
+  },
+  {
+    id: 'LHS',
+    title: "That's All!",
+    content:
+      'Try searching for a class you need to take and looking through the results.',
+    anchorOrigin: { vertical: 'top', horizontal: 'right' },
+    transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+  },
+];
+
+type TutorialProps = {
+  open: boolean;
+  close: () => void;
+};
+
+const Tutorial = ({ open, close }: TutorialProps) => {
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [place, setPlace] = useState(0);
+
+  useEffect(() => {
+    // For each element, set anchor based on `data-tutorial-id`
+    const elements = document.querySelectorAll('[data-tutorial-id]');
+    if (!elements.length) {
+      close();
+      return;
+    }
+    const newSteps = [...stepsTemplate];
+    elements.forEach((element) => {
+      if (element.checkVisibility()) {
+        const id = element.getAttribute('data-tutorial-id') as string;
+        const foundStep = newSteps.findIndex((step) => step.id === id);
+        if (foundStep !== -1) {
+          newSteps[foundStep].element = element;
+        }
+      }
+    });
+    setSteps(
+      newSteps.filter((step) => typeof step.element !== 'undefined') as Step[],
+    );
+    setPlace(0);
+  }, [open, close]);
+
+  return (
+    <>
+      <Backdrop sx={(theme) => ({ zIndex: theme.zIndex.modal })} open={open} />
+      {steps.map(({ content, ...otherProps }, index) => (
+        <TutorialPopup
+          key={index}
+          open={open && place === index}
+          incrementStep={() => {
+            if (place === steps.length - 1) {
+              close();
+              return;
+            }
+            setPlace(place + 1);
+          }}
+          close={close}
+          buttonText={index === steps.length - 1 ? 'Done' : 'Next'}
+          {...otherProps}
+        >
+          {content}
+        </TutorialPopup>
+      ))}
+    </>
+  );
+};
+
+export default Tutorial;
diff --git a/src/components/navigation/Carousel/Carousel.tsx b/src/components/navigation/Carousel/Carousel.tsx
index 7fce1b9f..d3a7c37a 100644
--- a/src/components/navigation/Carousel/Carousel.tsx
+++ b/src/components/navigation/Carousel/Carousel.tsx
@@ -72,7 +72,7 @@ const Carousel = ({ names, children, compareLength }: CarouselProps) => {
     });
   };
 
-  const isSmallScreen = useMediaQuery('(max-width: 600px)');
+  const isSmallScreen = useMediaQuery('(max-width: 640px)');
   const [open, setOpen] = useState(false);
   useEffect(() => setOpen(!isSmallScreen), [isSmallScreen]);
   useEffect(() => {
diff --git a/src/components/navigation/TopMenu/TopMenu.tsx b/src/components/navigation/TopMenu/TopMenu.tsx
index 09b0ea77..3917c830 100644
--- a/src/components/navigation/TopMenu/TopMenu.tsx
+++ b/src/components/navigation/TopMenu/TopMenu.tsx
@@ -1,12 +1,14 @@
-import { Share } from '@mui/icons-material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import ShareIcon from '@mui/icons-material/Share';
 import { IconButton, Snackbar, Tooltip } from '@mui/material';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import Background from '@/../public/background.png';
 import WhatsNew from '@/components/common/WhatsNew/whatsNew';
+import Tutorial from '@/components/dashboard/Tutorial/Tutorial';
 import SearchBar from '@/components/search/SearchBar/SearchBar';
 
 /**
@@ -53,6 +55,25 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
     alert(url);
   }
 
+  const [openTutorial, setOpenTutorial] = useState(false);
+  const closeTutorial = useCallback(() => setOpenTutorial(false), []);
+  const [tutorialHint, setTutorialHint] = useState(false);
+  //Open if not already closed (based on localStorage)
+  useEffect(() => {
+    const previous = localStorage.getItem('tutorialHint');
+    let ask = previous === null;
+    if (previous !== null) {
+      const parsed = JSON.parse(previous);
+      if (parsed !== null && parsed.value !== 'opened') {
+        ask = true;
+      }
+    }
+    if (ask) {
+      setTutorialHint(true);
+    }
+  }, []);
+  const cacheIndex = 0; //Increment this to open the popup for all users on next deployment
+
   return (
     <>
       <div className="relative overflow-hidden flex items-center gap-y-0 gap-x-4 md:gap-x-8 lg:gap-x-16 py-1 md:py-2 px-4 md:px-8 lg:px-16 bg-lighten dark:bg-darken flex-wrap sm:flex-nowrap">
@@ -76,30 +97,68 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
           className="order-last basis-full sm:order-none sm:basis-[32rem] shrink"
           input_className="[&>.MuiInputBase-root]:bg-white [&>.MuiInputBase-root]:dark:bg-haiti"
         />
-
-        <div className="ml-auto">
-          <WhatsNew />
-        </div>
-
-        <Tooltip title="Share link to search">
-          <IconButton
-            className="aspect-square"
-            size="medium"
-            onClick={() => {
-              let url = window.location.href;
-              if (
-                router.query &&
-                Object.keys(router.query).length === 0 &&
-                Object.getPrototypeOf(router.query) === Object.prototype
-              ) {
-                url = 'https://trends.utdnebula.com/';
+        <div className="flex gap-0 md:gap-4 ml-auto">
+          <div className="ml-auto">
+            <WhatsNew />
+          </div>
+          <div className="relative">
+            <div
+              className={
+                tutorialHint
+                  ? 'absolute w-11 h-11 rounded-full bg-royal dark:bg-cornflower-400 animate-ping'
+                  : 'hidden'
               }
-              shareLink(url);
-            }}
-          >
-            <Share className="text-3xl mr-1" />
-          </IconButton>
-        </Tooltip>
+            />
+            <div
+              className={
+                tutorialHint
+                  ? ' rounded-full bg-royal dark:bg-cornflower-400'
+                  : ''
+              }
+            >
+              <Tooltip title="Open tutorial">
+                <IconButton
+                  className="aspect-square"
+                  size="medium"
+                  onClick={() => {
+                    setTutorialHint(false);
+                    localStorage.setItem(
+                      'tutorialHint',
+                      JSON.stringify({
+                        value: 'opened',
+                        cacheIndex: cacheIndex,
+                      }),
+                    );
+                    setOpenTutorial(true);
+                  }}
+                >
+                  <HelpOutlineIcon
+                    className={'text-3xl' + (tutorialHint ? ' text-white' : '')}
+                  />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+          <Tooltip title="Share link to search" className="ml-auto">
+            <IconButton
+              className="aspect-square"
+              size="medium"
+              onClick={() => {
+                let url = window.location.href;
+                if (
+                  router.query &&
+                  Object.keys(router.query).length === 0 &&
+                  Object.getPrototypeOf(router.query) === Object.prototype
+                ) {
+                  url = 'https://trends.utdnebula.com/';
+                }
+                shareLink(url);
+              }}
+            >
+              <ShareIcon className="text-3xl mr-1" />
+            </IconButton>
+          </Tooltip>
+        </div>
       </div>
       <Snackbar
         open={openCopied}
@@ -107,6 +166,7 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
         onClose={() => setOpenCopied(false)}
         message="Copied!"
       />
+      <Tutorial open={openTutorial} close={closeTutorial} />
     </>
   );
 }
diff --git a/src/components/search/Filters/Filters.tsx b/src/components/search/Filters/Filters.tsx
index b965a062..63fa2c09 100644
--- a/src/components/search/Filters/Filters.tsx
+++ b/src/components/search/Filters/Filters.tsx
@@ -132,7 +132,7 @@ const Filters = ({
   }
 
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-2" data-tutorial-id="filters">
       {/* min letter grade dropdown*/}
       <Tooltip title={'Select Minimum Letter Grade Average'} placement="top">
         <FormControl
diff --git a/src/components/search/SearchBar/SearchBar.tsx b/src/components/search/SearchBar/SearchBar.tsx
index 914f3262..d9668114 100644
--- a/src/components/search/SearchBar/SearchBar.tsx
+++ b/src/components/search/SearchBar/SearchBar.tsx
@@ -206,7 +206,10 @@ const SearchBar = ({
   }, []);
 
   return (
-    <div className={'flex items-center gap-2 ' + (className ?? '')}>
+    <div
+      className={'flex items-center gap-2 ' + (className ?? '')}
+      data-tutorial-id="search"
+    >
       <Autocomplete
         multiple
         freeSolo
diff --git a/src/components/search/SearchResultsTable/SearchResultsTable.tsx b/src/components/search/SearchResultsTable/SearchResultsTable.tsx
index 5996b2c8..52d95135 100644
--- a/src/components/search/SearchResultsTable/SearchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable/SearchResultsTable.tsx
@@ -90,6 +90,7 @@ type RowProps = {
   addToCompare: (arg0: SearchQuery) => void;
   removeFromCompare: (arg0: SearchQuery) => void;
   color?: string;
+  showTutorial: boolean;
 };
 
 function Row({
@@ -100,6 +101,7 @@ function Row({
   addToCompare,
   removeFromCompare,
   color,
+  showTutorial,
 }: RowProps) {
   const [open, setOpen] = useState(false);
   const canOpen =
@@ -160,8 +162,12 @@ function Row({
           if (canOpen) setOpen(!open);
         }} // opens/closes the card by clicking anywhere on the row
         className={canOpen ? 'cursor-pointer' : ''}
+        data-tutorial-id={showTutorial && 'result'}
       >
-        <TableCell className="border-b-0">
+        <TableCell
+          className="border-b-0"
+          data-tutorial-id={showTutorial && 'actions'}
+        >
           <div className="flex items-center gap-1">
             <Tooltip
               title={open ? 'Minimize Result' : 'Expand Result'}
@@ -297,6 +303,7 @@ function Row({
 
 type SearchResultsTableProps = {
   resultsLoading: 'loading' | 'done';
+  numSearches: number;
   includedResults: SearchQuery[];
   grades: { [key: string]: GenericFetchedData<GradesType> };
   rmp: { [key: string]: GenericFetchedData<RMPInterface> };
@@ -308,6 +315,7 @@ type SearchResultsTableProps = {
 
 const SearchResultsTable = ({
   resultsLoading,
+  numSearches,
   includedResults,
   grades,
   rmp,
@@ -539,7 +547,7 @@ const SearchResultsTable = ({
           </TableHead>
           <TableBody>
             {resultsLoading === 'done'
-              ? sortedResults.map((result) => (
+              ? sortedResults.map((result, index) => (
                   <Row
                     key={searchQueryLabel(result)}
                     course={result}
@@ -553,6 +561,7 @@ const SearchResultsTable = ({
                     addToCompare={addToCompare}
                     removeFromCompare={removeFromCompare}
                     color={colorMap[searchQueryLabel(result)]}
+                    showTutorial={index === numSearches}
                   />
                 ))
               : Array(10)
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index e81f188e..4e7adaf2 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -585,6 +585,7 @@ export const Dashboard: NextPage<Props> = (props: Props): React.ReactNode => {
     const searchResultsTable = (
       <SearchResultsTable
         resultsLoading={results.state}
+        numSearches={courses.length + professors.length}
         includedResults={includedResults}
         grades={props.grades}
         rmp={props.rmp}
@@ -615,14 +616,19 @@ export const Dashboard: NextPage<Props> = (props: Props): React.ReactNode => {
           <Grid size={{ xs: false, sm: 6, md: 6 }}></Grid>
         </Grid>
         <div className="sm:hidden">
-          {carousel}
-          {searchResultsTable}
+          <div data-tutorial-id="LHS"> {carousel} </div>
+          <div data-tutorial-id="RHS"> {searchResultsTable} </div>
         </div>
         <PanelGroup
           direction="horizontal"
           className="hidden sm:flex overflow-visible"
         >
-          <Panel ref={panelLRef} minSize={40} defaultSize={50}>
+          <Panel
+            ref={panelLRef}
+            minSize={40}
+            defaultSize={50}
+            data-tutorial-id="LHS"
+          >
             {searchResultsTable}
           </Panel>
           <PanelResizeHandle
@@ -634,6 +640,7 @@ export const Dashboard: NextPage<Props> = (props: Props): React.ReactNode => {
             ref={panelRRef}
             minSize={30}
             defaultSize={50}
+            data-tutorial-id="RHS"
           >
             <div className="sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto mt-4">
               {carousel}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 265750b2..7d3a5fc0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -27,4 +27,13 @@ body,
   .bg-darken {
     background-color: rgba(0, 0, 0, 0.6);
   }
+
+  .tutorial-raise {
+    position: relative;
+    z-index: calc(var(--mui-zIndex-modal) + 1);
+    scroll-margin: 10rem;
+  }
+  .tutorial-table {
+    background-color: var(--mui-palette-background-paper);
+  }
 }