diff --git a/README.md b/README.md
index ea37e1e09..0810536e8 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,8 @@ GraduateNU aims to empower Northeastern students to customize their plan of stud
 
 5. Then run the new version of the application by running `yarn dev` at the root of the project. This starts up a NestJS server + a NextJS frontend + a Proxy. The proxy listens on port [3002](http://localhost:3002/), forwards /api requests to the NestJS server running on port 3001, and all other requests to the frontend running on port 3000.
 
+5a. For Windows machines, run `yarn concurrently "yarn workspaces foreach --parallel --verbose --interlaced run dev" "yarn dev:proxy"` instead of `yarn dev`
+
 6. Visit [http://localhost:3002](http://localhost:3002/) to view the app.
 
 To run the two separately, visit the frontend and api packages(sub directories of the monorepo).
diff --git a/packages/common/src/major2-validation.ts b/packages/common/src/major2-validation.ts
index f632d9db9..ec79abb82 100644
--- a/packages/common/src/major2-validation.ts
+++ b/packages/common/src/major2-validation.ts
@@ -66,6 +66,7 @@ type CourseError = {
   type: typeof MajorValidationErrorType.Course;
   requiredCourse: string;
 };
+
 export const CourseError = (c: IRequiredCourse): CourseError => ({
   type: MajorValidationErrorType.Course,
   requiredCourse: courseToString(c),
diff --git a/packages/common/src/test.js b/packages/common/src/test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
index 4cbee12fa..79d200119 100644
--- a/packages/common/src/types.ts
+++ b/packages/common/src/types.ts
@@ -181,7 +181,6 @@ export type Requirement2 =
   | ICourseRange2
   | IRequiredCourse
   | Section;
-
 /**
  * Represents a requirement where X number of credits need to be completed from
  * a list of courses.
diff --git a/packages/frontend/components/AddCourseModal/AddCourseModal.tsx b/packages/frontend/components/AddCourseModal/AddCourseModal.tsx
index bf748519a..df7859e93 100644
--- a/packages/frontend/components/AddCourseModal/AddCourseModal.tsx
+++ b/packages/frontend/components/AddCourseModal/AddCourseModal.tsx
@@ -13,7 +13,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
+import { NUPathEnum, ScheduleCourse2, SeasonEnum } from "@graduate/common";
 import { useState } from "react";
 import { useSearchCourses } from "../../hooks";
 import {
@@ -33,6 +33,7 @@ import { SecondaryButton } from "../Button";
 interface AddCourseModalProps {
   isOpen: boolean;
   catalogYear?: number;
+  season: SeasonEnum;
   addTo: string;
   /** Function to close the modal UX, returned from the useDisclosure chakra hook */
   closeModalDisplay: () => void;
@@ -50,6 +51,7 @@ interface AddCourseModalProps {
 export const AddCourseModal: React.FC<AddCourseModalProps> = ({
   isOpen,
   catalogYear,
+  season,
   addTo,
   closeModalDisplay,
   isCourseAlreadyAdded,
@@ -227,6 +229,8 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
                       (course) => (
                         <SearchResult
                           key={getCourseDisplayString(course)}
+                          year={catalogYear}
+                          season={season}
                           course={course}
                           addSelectedCourse={addSelectedCourse}
                           isResultAlreadyAdded={isCourseAlreadyAdded(course)}
diff --git a/packages/frontend/components/AddCourseModal/NUPathLabel.tsx b/packages/frontend/components/AddCourseModal/NUPathLabel.tsx
index 2e2ad21d4..2c4dc62f2 100644
--- a/packages/frontend/components/AddCourseModal/NUPathLabel.tsx
+++ b/packages/frontend/components/AddCourseModal/NUPathLabel.tsx
@@ -48,7 +48,7 @@ export const NUPathLabel: React.FC<NuPathLabelProps> = ({
   }
 
   return (
-    <Flex justifyContent="end" gap="2xs" flex="1" ml="xs">
+    <Flex justifyContent="end" gap="2xs" ml="xs">
       {nuPaths.map((nuPath) => (
         <Flex
           key={nuPaths.indexOf(nuPath)}
diff --git a/packages/frontend/components/AddCourseModal/SearchResult.tsx b/packages/frontend/components/AddCourseModal/SearchResult.tsx
index e08e8dcc7..2b7b1751a 100644
--- a/packages/frontend/components/AddCourseModal/SearchResult.tsx
+++ b/packages/frontend/components/AddCourseModal/SearchResult.tsx
@@ -1,12 +1,15 @@
-import { AddIcon } from "@chakra-ui/icons";
+import { AddIcon, QuestionOutlineIcon } from "@chakra-ui/icons";
 import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
-import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
+import { NUPathEnum, ScheduleCourse2, SeasonEnum } from "@graduate/common";
 import { getCourseDisplayString } from "../../utils/";
 import { GraduateToolTip } from "../GraduateTooltip";
 import { NUPathLabel } from "./NUPathLabel";
+import { getSearchLink } from "../ScheduleCourse";
 
 interface SearchResultProps {
   course: ScheduleCourse2<null>;
+  year: number | undefined;
+  season: SeasonEnum;
   addSelectedCourse: (course: ScheduleCourse2<null>) => Promise<void>;
   isResultAlreadySelected: boolean;
   isResultAlreadyAdded: boolean;
@@ -17,6 +20,8 @@ interface SearchResultProps {
 
 export const SearchResult: React.FC<SearchResultProps> = ({
   course,
+  year,
+  season,
   addSelectedCourse,
   isResultAlreadySelected,
   isResultAlreadyAdded,
@@ -48,6 +53,26 @@ export const SearchResult: React.FC<SearchResultProps> = ({
             {course.name}
           </Text>
         </Box>
+        <Box ml="auto" mr="sm"></Box>
+        <a
+          href={getSearchLink(year ?? 2022, season, course)}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <IconButton
+            aria-label="Add class"
+            icon={<QuestionOutlineIcon />}
+            color="primary.blue.light.main"
+            border={0}
+            colorScheme="primary.blue.light.main"
+            isRound
+            size="sm"
+            pr={1}
+            isLoading={isSelectingAnotherCourse}
+            isDisabled={isResultAlreadyAdded || isResultAlreadySelected}
+            alignSelf="center"
+          />
+        </a>
         <NUPathLabel
           nuPaths={course.nupaths ? course.nupaths : []}
           filteredPaths={filteredPaths}
diff --git a/packages/frontend/components/Plan/AddPlanModal.tsx b/packages/frontend/components/Plan/AddPlanModal.tsx
index 20ee57181..9a689195c 100644
--- a/packages/frontend/components/Plan/AddPlanModal.tsx
+++ b/packages/frontend/components/Plan/AddPlanModal.tsx
@@ -335,6 +335,7 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                       <Flex alignItems="center">
                         <Checkbox
                           mr="md"
+                          borderColor="primary.blue.dark.main"
                           {...register("agreeToBetaMajor", {
                             required: "You must agree to continue",
                           })}
diff --git a/packages/frontend/components/Plan/ScheduleTerm.tsx b/packages/frontend/components/Plan/ScheduleTerm.tsx
index 55caafd2f..394ae9135 100644
--- a/packages/frontend/components/Plan/ScheduleTerm.tsx
+++ b/packages/frontend/components/Plan/ScheduleTerm.tsx
@@ -87,6 +87,7 @@ export const ScheduleTerm: React.FC<ScheduleTermProps> = ({
       ))}
       <AddCourseButton onOpen={onOpen} />
       <AddCourseModal
+        season={scheduleTerm.season}
         isOpen={isOpen}
         catalogYear={catalogYear}
         addTo={getSeasonDisplayWord(scheduleTerm.season)}
diff --git a/packages/frontend/components/Plan/TransferCourses.tsx b/packages/frontend/components/Plan/TransferCourses.tsx
index f3658937a..7337b73fd 100644
--- a/packages/frontend/components/Plan/TransferCourses.tsx
+++ b/packages/frontend/components/Plan/TransferCourses.tsx
@@ -1,7 +1,7 @@
 import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
 import { Flex, Grid, Stack, Text, useDisclosure } from "@chakra-ui/react";
 import { API } from "@graduate/api-client";
-import { ScheduleCourse2, StudentModel } from "@graduate/common";
+import { ScheduleCourse2, SeasonEnum, StudentModel } from "@graduate/common";
 import { useRouter } from "next/router";
 import { fetchStudentAndPrepareForDnd, useStudentWithPlans } from "../../hooks";
 import {
@@ -19,11 +19,13 @@ import { IsGuestContext } from "../../pages/_app";
 interface TransferCoursesToggleProps {
   isExpanded: boolean;
   toggleExpanded: () => void;
+  year: number;
 }
 
 export const TransferCourses: React.FC<TransferCoursesToggleProps> = ({
   isExpanded,
   toggleExpanded,
+  year,
 }) => {
   const { student, isLoading, mutateStudent } = useStudentWithPlans();
   const router = useRouter();
@@ -86,11 +88,13 @@ export const TransferCourses: React.FC<TransferCoursesToggleProps> = ({
         isExpanded={isExpanded}
         toggleExpanded={toggleExpanded}
         totalTransferCredits={totalTransferCredits}
+        year={year}
       />
       {isExpanded && (
         <TransferCoursesBody
           transferCourses={transferCourses}
           updateTransferCourses={updateTransferCourses}
+          year={year}
         />
       )}
     </Flex>
@@ -102,11 +106,13 @@ interface TransferCoursesBodyProps {
   updateTransferCourses: (
     updateTransferCourses: ScheduleCourse2<null>[]
   ) => void;
+  year: number;
 }
 
 const TransferCoursesBody: React.FC<TransferCoursesBodyProps> = ({
   transferCourses,
   updateTransferCourses,
+  year,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -145,6 +151,9 @@ const TransferCoursesBody: React.FC<TransferCoursesBodyProps> = ({
       ))}
       <AddCourseButton onOpen={onOpen} />
       <AddCourseModal
+        //is season really necessary? i have placeholder here
+        season={SeasonEnum.FL}
+        catalogYear={year}
         isOpen={isOpen}
         addTo="Transfer Courses"
         closeModalDisplay={onClose}
diff --git a/packages/frontend/components/ScheduleCourse/ScheduleCourse.tsx b/packages/frontend/components/ScheduleCourse/ScheduleCourse.tsx
index fd5c4656b..6263ddec4 100644
--- a/packages/frontend/components/ScheduleCourse/ScheduleCourse.tsx
+++ b/packages/frontend/components/ScheduleCourse/ScheduleCourse.tsx
@@ -7,6 +7,7 @@ import {
   INEUReqError,
   IRequiredCourse,
   ScheduleCourse2,
+  SeasonEnum,
 } from "@graduate/common";
 import { forwardRef, PropsWithChildren, useEffect, useState } from "react";
 import {
@@ -383,3 +384,33 @@ const ScheduleCourseDraggedContents: React.FC<
 const ScheduleCourseSpacer: React.FC = () => {
   return <div style={{ width: "32px", height: "32px", flexShrink: 0 }}></div>;
 };
+
+export function getSearchLink(
+  catalogYear: number,
+  szn: SeasonEnum,
+  course: ScheduleCourse2<unknown>
+): string {
+  let sznInt = -1;
+  switch (szn) {
+    case SeasonEnum.FL:
+      sznInt = 1;
+      break;
+    case SeasonEnum.SP:
+      sznInt = 3;
+      break;
+    case SeasonEnum.S1:
+      sznInt = 4;
+      break;
+    case SeasonEnum.SM:
+      sznInt = 5;
+      break;
+    case SeasonEnum.S2:
+      sznInt = 6;
+      break;
+    default:
+      sznInt = 1;
+  }
+  return `https://searchneu.com/NEU/${catalogYear}${sznInt}${0}/search/${
+    course.name
+  }`;
+}
diff --git a/packages/frontend/components/Sidebar/NUPathSection.tsx b/packages/frontend/components/Sidebar/NUPathSection.tsx
index 019015369..1d1e05c76 100644
--- a/packages/frontend/components/Sidebar/NUPathSection.tsx
+++ b/packages/frontend/components/Sidebar/NUPathSection.tsx
@@ -62,6 +62,11 @@ const NUPathSection: React.FC<NUPathSectionProps> = ({
 
   if (loading) {
     validationStatus = SidebarValidationStatus.Loading;
+  } else if (
+    Object.keys(nupathMap).length > 0 &&
+    Object.keys(nupathMap).length < 13
+  ) {
+    validationStatus = SidebarValidationStatus.InProgress;
   } else if (Object.keys(nupathMap).length === 13 && wiCount >= 2) {
     // Sidebar is complete if all 13 nupaths have been fulfilled (including 2 writing intensives)
     validationStatus = SidebarValidationStatus.Complete;
@@ -105,11 +110,15 @@ const NUPathSection: React.FC<NUPathSectionProps> = ({
                 ? green
                 : validationStatus === SidebarValidationStatus.Error
                 ? grey
+                : validationStatus === SidebarValidationStatus.InProgress
+                ? "orange"
                 : "transparent"
             }
             borderColor={
               validationStatus === SidebarValidationStatus.Complete
                 ? green
+                : validationStatus === SidebarValidationStatus.InProgress
+                ? "orange"
                 : grey
             }
             color={
@@ -130,7 +139,7 @@ const NUPathSection: React.FC<NUPathSectionProps> = ({
             p="xs"
           >
             {/*
-              The following three icons appear and disappear based on opacity to allow for transitions (if they're conditionally rendered, then transitions can't occur).
+              The following four icons appear and disappear based on opacity to allow for transitions (if they're conditionally rendered, then transitions can't occur).
             */}
             <CheckIcon
               position="absolute"
@@ -160,6 +169,16 @@ const NUPathSection: React.FC<NUPathSectionProps> = ({
               transition="opacity 0.25s ease"
               transitionDelay="0.1s"
             />
+            <Text
+              opacity={
+                validationStatus === SidebarValidationStatus.InProgress ? 1 : 0
+              }
+              fontSize="s"
+              boxSize="34px"
+              color="white"
+            >
+              ...
+            </Text>
           </Box>
           <Text color="primary.blue.dark.main" mt="0" fontSize="sm">
             NUpath Requirements
diff --git a/packages/frontend/components/Sidebar/SandboxArea.tsx b/packages/frontend/components/Sidebar/SandboxArea.tsx
new file mode 100644
index 000000000..9f7fdcaab
--- /dev/null
+++ b/packages/frontend/components/Sidebar/SandboxArea.tsx
@@ -0,0 +1,100 @@
+import {
+  Box,
+  VStack,
+  Flex,
+  Image,
+  Text,
+  Textarea,
+  TextareaProps,
+} from "@chakra-ui/react";
+import { forwardRef, useEffect, useState } from "react";
+import ResizeTextarea from "react-textarea-autosize";
+import { toast } from "react-toastify";
+
+const AutoResizeTextarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    return (
+      <Textarea
+        minH="unset"
+        w="100%"
+        ref={ref}
+        minRows={4}
+        as={ResizeTextarea}
+        maxRows={10}
+        {...props}
+      />
+    );
+  }
+);
+
+AutoResizeTextarea.displayName = "AutoResizeTextarea";
+
+interface SandboxAreaProps {
+  planId: string | number;
+}
+
+type StoredNotes = {
+  [planId: string]: string;
+};
+
+function getStoredNotes(): StoredNotes {
+  const storedNotes = localStorage.getItem("notes");
+  if (!storedNotes) {
+    return {};
+  }
+
+  return JSON.parse(storedNotes);
+}
+
+function setStoredNotes(notes: StoredNotes) {
+  try {
+    localStorage.setItem("notes", JSON.stringify(notes));
+  } catch (e) {
+    toast.error("Maximum local storage quota exceed. Too many plans.");
+  }
+}
+
+function getPlanNote(planId: string): string {
+  const notesObject = getStoredNotes();
+  return notesObject[planId] || "";
+}
+
+export const SandboxArea: React.FC<SandboxAreaProps> = ({ planId }) => {
+  const [notes, setNotes] = useState<string>("");
+
+  const handleNewNotes = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!planId) return;
+    setNotes(e.target.value);
+    const notesObj = getStoredNotes();
+    notesObj[planId] = e.target.value;
+    setStoredNotes(notesObj);
+  };
+
+  useEffect(() => {
+    if (!planId) return;
+    setNotes(getPlanNote(String(planId)));
+  }, [planId]);
+
+  return (
+    <Box backgroundColor="white" pt="6" pb="6" px="3">
+      <VStack align="left" px="4">
+        <Flex mb="3">
+          <Image src="/sandbox_logo.svg" alt="sandbox logo" mr="2" />
+          <Text color="primary.blue.dark.main" fontSize="sm" fontWeight="bold">
+            Sandbox Area
+          </Text>
+        </Flex>
+        <Text color="primary.blue.dark.main" fontSize="sm" fontWeight="bold">
+          Notes
+        </Text>
+        <AutoResizeTextarea
+          placeholder="notes here!"
+          resize="vertical"
+          height="initial"
+          value={notes}
+          onChange={handleNewNotes}
+        />
+      </VStack>
+    </Box>
+  );
+};
diff --git a/packages/frontend/components/Sidebar/Sidebar.tsx b/packages/frontend/components/Sidebar/Sidebar.tsx
index 0ed90ce3e..2608f63d8 100644
--- a/packages/frontend/components/Sidebar/Sidebar.tsx
+++ b/packages/frontend/components/Sidebar/Sidebar.tsx
@@ -1,18 +1,16 @@
-import { Badge, Box, Flex, Heading, Link, Stack, Text } from "@chakra-ui/react";
+import { Link, Stack, Text } from "@chakra-ui/react";
 import {
   MajorValidationError,
   MajorValidationResult,
   PlanModel,
   ScheduleCourse2,
 } from "@graduate/common";
-import { memo, PropsWithChildren, useEffect, useRef, useState } from "react";
-import { DraggableScheduleCourse } from "../ScheduleCourse";
+import { memo, useEffect, useRef, useState } from "react";
 import SidebarSection from "./SidebarSection";
 import {
   getAllCoursesFromPlan,
   getSectionError,
   getAllCoursesInMajor,
-  BETA_MAJOR_TOOLTIP_MSG,
 } from "../../utils";
 import {
   handleApiClientError,
@@ -27,15 +25,15 @@ import {
   WorkerPostInfo,
 } from "../../validation-worker/worker-messages";
 import { useFetchCourses, useMajor } from "../../hooks";
-import { HelperToolTip } from "../Help";
 import NUPathSection from "./NUPathSection";
-import DropdownWarning from "./DropdownWarning";
 import { NUPathEnum } from "@graduate/common";
+import SidebarContainer from "./SidebarContainer";
 
 export enum SidebarValidationStatus {
   Loading = "Loading",
   Error = "Error",
   Complete = "Complete",
+  InProgress = "InProgress",
 }
 
 export const COOP_BLOCK: ScheduleCourse2<string> = {
@@ -106,6 +104,7 @@ const Sidebar: React.FC<SidebarProps> = memo(
         concentration: selectedPlan.concentration,
         requestNumber: currentRequestNum,
       };
+
       workerRef.current?.postMessage(validationInfo);
     };
 
@@ -188,11 +187,23 @@ const Sidebar: React.FC<SidebarProps> = memo(
     let concentrationValidationStatus = SidebarValidationStatus.Complete;
     if (validationStatus === undefined) {
       concentrationValidationStatus = SidebarValidationStatus.Loading;
-    } else if (concentrationValidationError) {
+    } else if (
+      concentrationValidationError &&
+      concentrationValidationError.type === "AND" &&
+      concentrationValidationError.error.type === "AND_UNSAT_CHILD" &&
+      concentrationValidationError.error.childErrors[0].type === "SECTION" &&
+      concentrationValidationError.error.childErrors[0]
+        .maxPossibleChildCount === 0
+    ) {
       concentrationValidationStatus = SidebarValidationStatus.Error;
+    } else {
+      concentrationValidationStatus = SidebarValidationStatus.InProgress;
     }
 
-    const creditsTaken = totalCreditsInSchedule(selectedPlan.schedule);
+    const creditsTaken = totalCreditsInSchedule(
+      selectedPlan.schedule,
+      transferCourses
+    );
 
     return (
       <SidebarContainer
@@ -202,6 +213,7 @@ const Sidebar: React.FC<SidebarProps> = memo(
         creditsToTake={major.totalCreditsRequired}
         renderCoopBlock
         renderBetaMajorBlock={major.metadata?.verified !== true}
+        planId={selectedPlan.id}
       >
         {courseData && (
           <>
@@ -215,10 +227,21 @@ const Sidebar: React.FC<SidebarProps> = memo(
                 getSectionError(index, validationStatus);
 
               let sectionValidationStatus = SidebarValidationStatus.Complete;
+
               if (validationStatus === undefined) {
                 sectionValidationStatus = SidebarValidationStatus.Loading;
-              } else if (sectionValidationError) {
+              } else if (
+                sectionValidationError &&
+                sectionValidationError.type === "SECTION" &&
+                sectionValidationError.maxPossibleChildCount === 0
+              ) {
                 sectionValidationStatus = SidebarValidationStatus.Error;
+              } else if (
+                sectionValidationError &&
+                sectionValidationError.type === "SECTION" &&
+                sectionValidationError.maxPossibleChildCount > 0
+              ) {
+                sectionValidationStatus = SidebarValidationStatus.InProgress;
               }
 
               return (
@@ -249,20 +272,26 @@ const Sidebar: React.FC<SidebarProps> = memo(
 
 interface NoMajorSidebarProps {
   selectedPlan: PlanModel<string>;
+  transferCourses: ScheduleCourse2<unknown>[];
 }
 
 export const NoMajorSidebar: React.FC<NoMajorSidebarProps> = ({
   selectedPlan,
+  transferCourses,
 }) => {
-  const creditsTaken = totalCreditsInSchedule(selectedPlan.schedule);
+  const creditsTaken = totalCreditsInSchedule(
+    selectedPlan.schedule,
+    transferCourses
+  );
   return (
     <SidebarContainer
       title="No Major"
       creditsTaken={creditsTaken}
       renderCoopBlock
       renderDropdownWarning={false}
+      planId={selectedPlan.id}
     >
-      <Stack px="md">
+      <Stack px="md" mb="3">
         <Text>
           A major has not been selected for this plan. Please select one if you
           would like to see major requirements. If we do not support your major,
@@ -286,99 +315,10 @@ export const NoMajorSidebar: React.FC<NoMajorSidebarProps> = ({
   );
 };
 
-interface SidebarContainerProps {
-  title: string;
-  subtitle?: string;
-  creditsTaken?: number;
-  creditsToTake?: number;
-  renderCoopBlock?: boolean;
-  renderBetaMajorBlock?: boolean;
-  renderDropdownWarning?: boolean;
-}
-
 export const NoPlanSidebar: React.FC = () => {
   return <SidebarContainer title="No Plan Selected" />;
 };
 
-const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
-  title,
-  subtitle,
-  creditsTaken,
-  creditsToTake,
-  renderCoopBlock,
-  renderBetaMajorBlock,
-  renderDropdownWarning = true,
-  children,
-}) => {
-  return (
-    <Box
-      pt="xl"
-      backgroundColor="neutral.50"
-      borderRight="1px"
-      borderRightColor="neutral.200"
-      minH="100%"
-    >
-      <Box px="md" pb="md">
-        <Box pb="sm">
-          {renderBetaMajorBlock && (
-            <Flex alignItems="center" pb="sm">
-              <Badge
-                borderColor="red"
-                borderWidth="1px"
-                variant="outline"
-                colorScheme="red"
-                fontWeight="bold"
-                fontSize="sm"
-                borderRadius="md"
-                mr="sm"
-              >
-                BETA MAJOR
-              </Badge>
-              <HelperToolTip label={BETA_MAJOR_TOOLTIP_MSG} />
-            </Flex>
-          )}
-          <Flex alignItems="center" columnGap="2xs">
-            <Heading
-              as="h1"
-              fontSize="2xl"
-              color="primary.blue.dark.main"
-              fontWeight="bold"
-            >
-              {title}
-            </Heading>
-          </Flex>
-          {subtitle && (
-            <Text fontSize="sm" color="primary.blue.dark.main">
-              {subtitle}
-            </Text>
-          )}
-        </Box>
-        {renderDropdownWarning && <DropdownWarning />}
-        {creditsTaken !== undefined && (
-          <Flex mb="sm" alignItems="baseline" columnGap="xs">
-            <Text
-              fontSize="2xl"
-              color="primary.blue.dark.main"
-              fontWeight="bold"
-            >
-              {creditsTaken}
-              {creditsToTake !== undefined && `/${creditsToTake}`}
-            </Text>
-            <Text color="primary.blue.dark.main">Credits Completed</Text>
-          </Flex>
-        )}
-        {renderCoopBlock && (
-          <DraggableScheduleCourse
-            scheduleCourse={COOP_BLOCK}
-            isDisabled={false}
-          />
-        )}
-      </Box>
-      {children}
-    </Box>
-  );
-};
-
 // We need to manually set the display name like this because
 // of how we're using memo above.
 Sidebar.displayName = "Sidebar";
diff --git a/packages/frontend/components/Sidebar/SidebarContainer.tsx b/packages/frontend/components/Sidebar/SidebarContainer.tsx
new file mode 100644
index 000000000..9bd299f2c
--- /dev/null
+++ b/packages/frontend/components/Sidebar/SidebarContainer.tsx
@@ -0,0 +1,97 @@
+import { Box, Flex, Badge, Heading, Text } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+import { BETA_MAJOR_TOOLTIP_MSG } from "../../utils";
+import { HelperToolTip } from "../Help";
+import { DraggableScheduleCourse } from "../ScheduleCourse";
+import DropdownWarning from "./DropdownWarning";
+import { COOP_BLOCK } from "./Sidebar";
+import { SandboxArea } from "./SandboxArea";
+
+interface SidebarContainerProps {
+  title: string;
+  subtitle?: string;
+  creditsTaken?: number;
+  creditsToTake?: number;
+  renderCoopBlock?: boolean;
+  renderBetaMajorBlock?: boolean;
+  renderDropdownWarning?: boolean;
+  planId?: string | number;
+}
+
+const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
+  title,
+  subtitle,
+  creditsTaken,
+  creditsToTake,
+  renderCoopBlock,
+  renderBetaMajorBlock,
+  renderDropdownWarning = true,
+  planId,
+  children,
+}) => {
+  return (
+    <Box pt="xl" borderRight="1px" borderRightColor="neutral.200" minH="100%">
+      <Box px="md" pb="md">
+        <Box pb="sm">
+          {renderBetaMajorBlock && (
+            <Flex alignItems="center" pb="sm">
+              <Badge
+                borderColor="red"
+                borderWidth="1px"
+                variant="outline"
+                colorScheme="red"
+                fontWeight="bold"
+                fontSize="sm"
+                borderRadius="md"
+                mr="sm"
+              >
+                BETA MAJOR
+              </Badge>
+              <HelperToolTip label={BETA_MAJOR_TOOLTIP_MSG} />
+            </Flex>
+          )}
+          <Flex alignItems="center" columnGap="2xs">
+            <Heading
+              as="h1"
+              fontSize="2xl"
+              color="primary.blue.dark.main"
+              fontWeight="bold"
+            >
+              {title}
+            </Heading>
+          </Flex>
+          {subtitle && (
+            <Text fontSize="sm" color="primary.blue.dark.main">
+              {subtitle}
+            </Text>
+          )}
+        </Box>
+        {renderDropdownWarning && <DropdownWarning />}
+        {creditsTaken !== undefined && (
+          <Flex mb="sm" alignItems="baseline" columnGap="xs">
+            <Text
+              fontSize="2xl"
+              color="primary.blue.dark.main"
+              fontWeight="bold"
+            >
+              {creditsTaken}
+              {creditsToTake !== undefined && `/${creditsToTake}`}
+            </Text>
+            <Text color="primary.blue.dark.main">Credits Completed</Text>
+          </Flex>
+        )}
+        {renderCoopBlock && (
+          <DraggableScheduleCourse
+            scheduleCourse={COOP_BLOCK}
+            isDisabled={false}
+          />
+        )}
+      </Box>
+
+      {children}
+
+      {planId && <SandboxArea planId={planId} />}
+    </Box>
+  );
+};
+export default SidebarContainer;
diff --git a/packages/frontend/components/Sidebar/SidebarSection.tsx b/packages/frontend/components/Sidebar/SidebarSection.tsx
index ee9ebddcc..9ad5442f9 100644
--- a/packages/frontend/components/Sidebar/SidebarSection.tsx
+++ b/packages/frontend/components/Sidebar/SidebarSection.tsx
@@ -5,6 +5,7 @@ import {
   SmallCloseIcon,
   WarningTwoIcon,
 } from "@chakra-ui/icons";
+
 import { Box, Flex, Spinner, Stack, Text } from "@chakra-ui/react";
 import { ScheduleCourse2, Section } from "@graduate/common";
 import { useState } from "react";
@@ -85,11 +86,15 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
                 ? green
                 : validationStatus === SidebarValidationStatus.Error
                 ? grey
+                : validationStatus === SidebarValidationStatus.InProgress
+                ? "orange"
                 : "transparent"
             }
             borderColor={
               validationStatus === SidebarValidationStatus.Complete
                 ? green
+                : validationStatus === SidebarValidationStatus.InProgress
+                ? "orange"
                 : grey
             }
             color={
@@ -101,16 +106,17 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
             width="18px"
             height="18px"
             display="flex"
-            transition="background 0.25s ease, color 0.25s ease, border 0.25s ease"
-            transitionDelay="0.1s"
             alignItems="center"
             justifyContent="center"
+            transition="background 0.25s ease, color 0.25s ease, border 0.25s ease"
+            transitionDelay="0.1s"
             borderRadius="2xl"
             mt="4xs"
             p="xs"
+            position="relative"
           >
             {/*
-              The following three icons appear and disappear based on opacity to allow for transitions (if they're conditionally rendered, then transitions can't occur).
+              The following four icons appear and disappear based on opacity to allow for transitions (if they're conditionally rendered, then transitions can't occur).
             */}
             <CheckIcon
               position="absolute"
@@ -140,6 +146,16 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
               transition="opacity 0.25s ease"
               transitionDelay="0.1s"
             />
+            <Text
+              opacity={
+                validationStatus === SidebarValidationStatus.InProgress ? 1 : 0
+              }
+              fontSize="s"
+              boxSize="34px"
+              color="white"
+            >
+              ...
+            </Text>
           </Box>
           <Text color="primary.blue.dark.main" mt="0" fontSize="sm">
             {section.title}
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 65887e3b1..d016dd291 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -26,6 +26,7 @@
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.33.0",
     "react-select": "^5.7.2",
+    "react-textarea-autosize": "^8.5.4",
     "react-toastify": "^8.2.0",
     "swr": "^1.3.0"
   },
diff --git a/packages/frontend/pages/home.tsx b/packages/frontend/pages/home.tsx
index 325da3856..3a9c40ca7 100644
--- a/packages/frontend/pages/home.tsx
+++ b/packages/frontend/pages/home.tsx
@@ -252,7 +252,13 @@ const HomePage: NextPage = () => {
           transferCourses={student.coursesTransfered || []}
         />
       );
-    } else renderedSidebar = <NoMajorSidebar selectedPlan={selectedPlan} />;
+    } else
+      renderedSidebar = (
+        <NoMajorSidebar
+          selectedPlan={selectedPlan}
+          transferCourses={student.coursesTransfered || []}
+        />
+      );
   }
 
   return (
@@ -310,6 +316,7 @@ const HomePage: NextPage = () => {
                 />
                 <Divider borderColor="neutral.200" borderWidth={1} />
                 <TransferCourses
+                  year={selectedPlan.catalogYear}
                   isExpanded={isTransferCoursesExpanded}
                   toggleExpanded={() =>
                     setIsTransferCoursesExpanded(!isTransferCoursesExpanded)
diff --git a/packages/frontend/public/sandbox_logo.svg b/packages/frontend/public/sandbox_logo.svg
new file mode 100644
index 000000000..75ce4d368
--- /dev/null
+++ b/packages/frontend/public/sandbox_logo.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 9.46417V9.40812C0 9.33807 0.0700555 9.23999 0.140111 9.19795L5.10004 6.56387C5.28219 6.46579 5.50636 6.56387 5.50636 6.76002C5.50636 6.95618 5.50636 6.90013 5.50636 7.41854C5.50636 7.51662 5.43631 7.60069 5.36625 7.64272L1.91952 9.43614L5.35224 11.1595C5.4223 11.2015 5.49235 11.2856 5.49235 11.3697C5.49235 11.8881 5.49235 11.8461 5.49235 12.0282C5.49235 12.2244 5.26817 12.3224 5.08603 12.2244L0.140111 9.67433C0.0700555 9.64631 0 9.54823 0 9.46417Z" fill="#1C3557"/>
+<path d="M10.4797 11.3765C10.4797 11.2924 10.5358 11.2084 10.6198 11.1663L14.0526 9.44298L10.6339 7.64956C10.5498 7.60752 10.4937 7.52346 10.4937 7.42538C10.4937 6.90697 10.4937 6.96301 10.4937 6.76686C10.4937 6.5707 10.7179 6.47263 10.9001 6.5707L15.86 9.20479C15.9301 9.24682 16.0001 9.3449 16.0001 9.41496V9.471C16.0001 9.54106 15.9301 9.63913 15.86 9.68117L10.9001 12.2312C10.7179 12.3293 10.4937 12.2312 10.4937 12.035C10.4797 11.8529 10.4797 11.9089 10.4797 11.3765Z" fill="#1C3557"/>
+<path d="M6.64124 20.7849L2.99835 19.7341C2.92829 19.7201 2.87225 19.664 2.84423 19.608C2.8162 19.5379 2.80219 19.4679 2.83022 19.3978C3.27857 17.9407 4.06319 15.4607 4.41347 15.1525C4.81979 14.8022 5.64645 14.9423 6.10881 15.0544C6.80937 15.2365 7.70608 15.6288 7.88822 16.1473C8.05636 16.6096 7.38382 19.1316 6.96349 20.6028C6.94948 20.6728 6.89344 20.7289 6.83739 20.7709C6.78135 20.813 6.71129 20.813 6.64124 20.7849Z" fill="#1C3557"/>
+<path opacity="0.37" d="M6.55723 20.1544C6.54322 20.1544 6.5152 20.1404 6.50119 20.1124C6.37509 19.9162 6.47317 19.1736 6.79542 17.9406C7.18773 16.4134 6.8935 16.2733 5.99679 15.881C5.96877 15.867 5.89871 15.839 5.91272 15.7689C5.91272 15.7409 5.94074 15.7129 5.99679 15.6989C6.19294 15.6848 7.2718 15.909 7.43993 16.5115C7.55202 16.9318 6.72536 19.7761 6.62729 20.0983C6.61328 20.1264 6.58525 20.1544 6.55723 20.1544C6.57124 20.1544 6.57124 20.1544 6.55723 20.1544Z" fill="#D4D4D4"/>
+<path d="M8.9812 2.61224C8.51884 2.14988 8.36472 1.4213 8.56087 0.748768L8.729 0.160301C8.75703 0.0482124 8.88313 -0.0218431 8.9812 0.00617906L12.1617 0.930912C12.2738 0.958934 12.3299 1.08503 12.2878 1.19712L12.1477 1.68751C11.7554 3.07461 10.1161 3.74714 8.9812 2.61224ZM9.31747 1.00097C9.20538 1.57542 9.52764 2.13587 10.046 2.28999C10.5785 2.44411 11.1389 2.13587 11.3491 1.58943L9.31747 1.00097Z" fill="#1C3557"/>
+<path d="M6.94934 14.507L6.09466 14.2548C6.0246 14.2267 5.98257 14.1567 5.99658 14.0866L8.93891 3.90057C8.96693 3.83051 9.03699 3.78848 9.10705 3.80249L9.96172 4.05469C10.0318 4.08271 10.0738 4.15277 10.0598 4.22282L7.10346 14.4089C7.10346 14.4789 7.01939 14.521 6.94934 14.507Z" fill="#1B2432"/>
+</svg>
diff --git a/packages/frontend/utils/plan/totalCredits.ts b/packages/frontend/utils/plan/totalCredits.ts
index 8b95603f2..22e3dc86d 100644
--- a/packages/frontend/utils/plan/totalCredits.ts
+++ b/packages/frontend/utils/plan/totalCredits.ts
@@ -1,4 +1,9 @@
-import { Schedule2, ScheduleTerm2, ScheduleYear2 } from "@graduate/common";
+import {
+  Schedule2,
+  ScheduleCourse2,
+  ScheduleTerm2,
+  ScheduleYear2,
+} from "@graduate/common";
 
 /** The credits for all courses in a term. */
 export const totalCreditsInTerm = (term: ScheduleTerm2<unknown>): number => {
@@ -23,12 +28,14 @@ export const totalCreditsInYear = (
 
 /** The credits for all courses in a schedule summed. */
 export const totalCreditsInSchedule = (
-  schedule: Schedule2<unknown>
+  schedule: Schedule2<unknown>,
+  transfer: ScheduleCourse2<unknown>[]
 ): number => {
   return (
-    schedule.years.reduce(
+    (schedule.years.reduce(
       (totalCredits, year) => totalCreditsInYear(year) + totalCredits,
       0
-    ) ?? 0
+    ) ?? 0) +
+    (transfer.reduce((sum, course) => course.numCreditsMin + sum, 0) ?? 0)
   );
 };
diff --git a/yarn.lock b/yarn.lock
index a3066cb94..86b5d63a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1527,6 +1527,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.20.13":
+  version: 7.25.7
+  resolution: "@babel/runtime@npm:7.25.7"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 1d6133ed1cf1de1533cfe84a4a8f94525271a0d93f6af4f2cdae14884ec3c8a7148664ddf7fd2a14f82cc4485904a1761821a55875ad241c8b4034e95e7134b2
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3":
   version: 7.18.10
   resolution: "@babel/template@npm:7.18.10"
@@ -3173,6 +3182,7 @@ __metadata:
     react-error-boundary: ^3.1.4
     react-hook-form: ^7.33.0
     react-select: ^5.7.2
+    react-textarea-autosize: ^8.5.4
     react-toastify: ^8.2.0
     swr: ^1.3.0
     typescript: 4.6.3
@@ -11778,6 +11788,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-textarea-autosize@npm:^8.5.4":
+  version: 8.5.4
+  resolution: "react-textarea-autosize@npm:8.5.4"
+  dependencies:
+    "@babel/runtime": ^7.20.13
+    use-composed-ref: ^1.3.0
+    use-latest: ^1.2.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: a28f84e17505423fa2002b99bb17cb7396ac6fb18f81621af87d246abc6529caa0172f9a6cbf01e87e1f0b60fc50a1aa2e19bc8d09019e5f0f8560dffa1bb720
+  languageName: node
+  linkType: hard
+
 "react-toastify@npm:^8.2.0":
   version: 8.2.0
   resolution: "react-toastify@npm:8.2.0"
@@ -11918,6 +11941,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.1
+  resolution: "regenerator-runtime@npm:0.14.1"
+  checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38
+  languageName: node
+  linkType: hard
+
 "regenerator-transform@npm:^0.15.0":
   version: 0.15.0
   resolution: "regenerator-transform@npm:0.15.0"
@@ -13592,7 +13622,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-isomorphic-layout-effect@npm:^1.1.2":
+"use-composed-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-composed-ref@npm:1.3.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: f771cbadfdc91e03b7ab9eb32d0fc0cc647755711801bf507e891ad38c4bbc5f02b2509acadf9c965ec9c5f2f642fd33bdfdfb17b0873c4ad0a9b1f5e5e724bf
+  languageName: node
+  linkType: hard
+
+"use-isomorphic-layout-effect@npm:^1.1.1, use-isomorphic-layout-effect@npm:^1.1.2":
   version: 1.1.2
   resolution: "use-isomorphic-layout-effect@npm:1.1.2"
   peerDependencies:
@@ -13604,6 +13643,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-latest@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "use-latest@npm:1.2.1"
+  dependencies:
+    use-isomorphic-layout-effect: ^1.1.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: ed3f2ddddf6f21825e2ede4c2e0f0db8dcce5129802b69d1f0575fc1b42380436e8c76a6cd885d4e9aa8e292e60fb8b959c955f33c6a9123b83814a1a1875367
+  languageName: node
+  linkType: hard
+
 "use-sidecar@npm:^1.1.2":
   version: 1.1.2
   resolution: "use-sidecar@npm:1.1.2"