diff --git a/src/backend/src/prisma/seed.ts b/src/backend/src/prisma/seed.ts
index 95f880bf30..804b6946c1 100644
--- a/src/backend/src/prisma/seed.ts
+++ b/src/backend/src/prisma/seed.ts
@@ -1379,7 +1379,7 @@ const performSeed: () => Promise<void> = async () => {
   await ChangeRequestsService.reviewChangeRequest(joeShmoe, project3WP1ActivationCrId, 'Approved!', true, ner, null);
 
   /** Work Package 2 */
-  await seedWorkPackage(
+  const { workPackage: project3WP2 } = await seedWorkPackage(
     lexLuther,
     'Laser Canon Research',
     changeRequestProject7Id,
@@ -1404,7 +1404,7 @@ const performSeed: () => Promise<void> = async () => {
     WorkPackageStage.Testing,
     weeksFromNow(3).toISOString().split('T')[0],
     4,
-    [],
+    [project3WP1.wbsNum, project3WP2.wbsNum],
     [],
     zatanna,
     WbsElementStatus.Active,
diff --git a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/BlockedTaskBarView.tsx b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/BlockedTaskBarView.tsx
deleted file mode 100644
index b2401a8ee4..0000000000
--- a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/BlockedTaskBarView.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  GanttTask,
-  HighlightTaskComparator,
-  OnMouseOverOptions,
-  RequestEventChange
-} from '../../../../../utils/gantt.utils';
-import GanttTaskBarDisplay from './GanttTaskBarDisplay';
-
-interface BlockedGanttTaskViewProps<T> {
-  task: GanttTask<T>;
-  days: Date[];
-  getStartCol: (start: Date) => number;
-  getEndCol: (end: Date) => number;
-  handleOnMouseOver: (e: React.MouseEvent, task: OnMouseOverOptions) => void;
-  handleOnMouseLeave: () => void;
-  onShowChildrenToggle: () => void;
-  highlightedChange?: RequestEventChange<T>;
-  highlightTaskComparator: HighlightTaskComparator<T>;
-  highlightSubtaskComparator: HighlightTaskComparator<T>;
-}
-
-const BlockedGanttTaskView = <T,>({
-  task,
-  days,
-  getStartCol,
-  getEndCol,
-  handleOnMouseOver,
-  handleOnMouseLeave,
-  onShowChildrenToggle,
-  highlightedChange,
-  highlightSubtaskComparator,
-  highlightTaskComparator
-}: BlockedGanttTaskViewProps<T>) => {
-  return (
-    <>
-      <GanttTaskBarDisplay
-        days={days}
-        task={task}
-        handleOnMouseOver={handleOnMouseOver}
-        handleOnMouseLeave={handleOnMouseLeave}
-        onShowChildrenToggle={onShowChildrenToggle}
-        highlightSubtaskComparator={highlightSubtaskComparator}
-        highlightTaskComparator={highlightTaskComparator}
-        showChildren={false}
-        highlightedChange={highlightedChange}
-        getStartCol={getStartCol}
-        getEndCol={getEndCol}
-      />
-      {task.blocking.map((child) => {
-        return (
-          <BlockedGanttTaskView
-            key={child.id}
-            task={child}
-            days={days}
-            getStartCol={getStartCol}
-            getEndCol={getEndCol}
-            handleOnMouseOver={handleOnMouseOver}
-            onShowChildrenToggle={onShowChildrenToggle}
-            highlightTaskComparator={highlightTaskComparator}
-            highlightSubtaskComparator={highlightSubtaskComparator}
-            handleOnMouseLeave={handleOnMouseLeave}
-            highlightedChange={highlightedChange}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-export default BlockedGanttTaskView;
diff --git a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBar.tsx b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBar.tsx
index 4b4533f2d1..0999d23962 100644
--- a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBar.tsx
+++ b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBar.tsx
@@ -5,9 +5,6 @@
 
 import GanttTaskBarEdit from './GanttTaskBarEdit';
 import GanttTaskBarView from './GanttTaskBarView';
-import { ArcherContainer } from 'react-archer';
-import { useRef } from 'react';
-import { ArcherContainerHandle } from 'react-archer/lib/ArcherContainer/ArcherContainer.types';
 import {
   GanttChange,
   GanttTask,
@@ -46,14 +43,11 @@ const GanttTaskBar = <T,>({
   highlightSubtaskComparator,
   highlightTaskComparator
 }: GanttTaskBarProps<T>) => {
-  const archerRef = useRef<ArcherContainerHandle>(null);
-
   const getStartCol = (start: Date) => {
     const startCol = days.findIndex((day) => dateToString(day) === dateToString(getMonday(start))) + 1;
     return startCol;
   };
 
-  // if the end date doesn't exist within the timeframe, have it span to the end
   const getEndCol = (end: Date) => {
     const endCol =
       days.findIndex((day) => dateToString(day) === dateToString(getMonday(end))) === -1
@@ -62,45 +56,34 @@ const GanttTaskBar = <T,>({
     return endCol;
   };
 
-  const handleChange = (change: GanttChange<T>) => {
-    createChange(change);
-    setTimeout(() => {
-      if (archerRef.current) {
-        archerRef.current.refreshScreen();
-      }
-    }, 100); // wait for the change to be added to the state and the DOM to update
-  };
-
   return (
-    <ArcherContainer ref={archerRef} strokeColor="#ef4545">
-      <div id={`gantt-task-${task.id}`}>
-        {isEditMode ? (
-          <GanttTaskBarEdit
-            days={days}
-            task={task}
-            createChange={handleChange}
-            getStartCol={getStartCol}
-            getEndCol={getEndCol}
-            onAddTaskPressed={onAddTaskPressed}
-          />
-        ) : (
-          <GanttTaskBarView
-            days={days}
-            task={task}
-            getStartCol={getStartCol}
-            getEndCol={getEndCol}
-            handleOnMouseOver={handleOnMouseOver}
-            handleOnMouseLeave={handleOnMouseLeave}
-            showChildren={showChildren}
-            onShowChildrenToggle={onShowChildrenToggle}
-            highlightedChange={highlightedChange}
-            onAddTaskPressed={onAddTaskPressed}
-            highlightSubtaskComparator={highlightSubtaskComparator}
-            highlightTaskComparator={highlightTaskComparator}
-          />
-        )}
-      </div>
-    </ArcherContainer>
+    <div id={`gantt-task-${task.id}`}>
+      {isEditMode ? (
+        <GanttTaskBarEdit
+          days={days}
+          task={task}
+          createChange={createChange}
+          getStartCol={getStartCol}
+          getEndCol={getEndCol}
+          onAddTaskPressed={onAddTaskPressed}
+        />
+      ) : (
+        <GanttTaskBarView
+          days={days}
+          task={task}
+          getStartCol={getStartCol}
+          getEndCol={getEndCol}
+          handleOnMouseOver={handleOnMouseOver}
+          handleOnMouseLeave={handleOnMouseLeave}
+          showChildren={showChildren}
+          onShowChildrenToggle={onShowChildrenToggle}
+          highlightedChange={highlightedChange}
+          onAddTaskPressed={onAddTaskPressed}
+          highlightSubtaskComparator={highlightSubtaskComparator}
+          highlightTaskComparator={highlightTaskComparator}
+        />
+      )}
+    </div>
   );
 };
 
diff --git a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarView.tsx b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarView.tsx
index 6e17b69cce..ef6551fbfe 100644
--- a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarView.tsx
+++ b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarView.tsx
@@ -6,7 +6,6 @@ import {
 } from '../../../../../utils/gantt.utils';
 import { Collapse } from '@mui/material';
 import GanttTaskBar from './GanttTaskBar';
-import BlockedGanttTaskView from './BlockedTaskBarView';
 import GanttTaskBarDisplay from './GanttTaskBarDisplay';
 
 interface GanttTaskBarViewProps<T> {
@@ -74,23 +73,6 @@ const GanttTaskBarView = <T,>({
           );
         })}
       </Collapse>
-      {task.blocking.map((blocking) => {
-        return (
-          <BlockedGanttTaskView
-            key={blocking.id}
-            task={blocking}
-            days={days}
-            getStartCol={getStartCol}
-            getEndCol={getEndCol}
-            handleOnMouseOver={handleOnMouseOver}
-            onShowChildrenToggle={onShowChildrenToggle}
-            highlightSubtaskComparator={highlightSubtaskComparator}
-            highlightTaskComparator={highlightTaskComparator}
-            handleOnMouseLeave={handleOnMouseLeave}
-            highlightedChange={highlightedChange}
-          />
-        );
-      })}
     </>
   );
 };
diff --git a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartSection.tsx b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartSection.tsx
index a42ea71867..b415d3cf9c 100644
--- a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartSection.tsx
+++ b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartSection.tsx
@@ -15,6 +15,7 @@ import { Box, Typography } from '@mui/material';
 import { useState } from 'react';
 import GanttTaskBar from './GanttChartComponents/GanttTaskBar/GanttTaskBar';
 import GanttToolTip from './GanttChartComponents/GanttToolTip';
+import { ArcherContainer } from 'react-archer';
 
 interface GanttChartSectionProps<T> {
   start: Date;
@@ -64,42 +65,43 @@ const GanttChartSection = <T,>({
   };
 
   return tasks.length > 0 ? (
-    <Box sx={{ width: 'fit-content' }}>
-      <Box sx={{ mt: '1rem', width: 'fit-content' }}>
-        {tasks.map((task) => {
-          return (
-            <Box display="flex" alignItems="center">
-              <GanttTaskBar
-                key={task.id}
-                days={days}
-                task={task}
-                isEditMode={isEditMode}
-                createChange={handleCreateProjectChange}
-                handleOnMouseOver={handleOnMouseOver}
-                handleOnMouseLeave={handleOnMouseLeave}
-                onShowChildrenToggle={() => onShowChildrenToggle(task)}
-                onAddTaskPressed={onAddTaskPressed}
-                showChildren={shouldShowChildren(task)}
-                highlightedChange={highlightedChange}
-                highlightSubtaskComparator={highlightSubtaskComparator}
-                highlightTaskComparator={highlightTaskComparator}
-              />
-            </Box>
-          );
-        })}
+    <ArcherContainer strokeColor="#ef4545">
+      <Box sx={{ width: 'fit-content' }}>
+        <Box sx={{ mt: '1rem', width: 'fit-content' }}>
+          {tasks.map((task) => {
+            return (
+              <Box key={task.id} display="flex" alignItems="center">
+                <GanttTaskBar
+                  days={days}
+                  task={task}
+                  isEditMode={isEditMode}
+                  createChange={handleCreateProjectChange}
+                  handleOnMouseOver={handleOnMouseOver}
+                  handleOnMouseLeave={handleOnMouseLeave}
+                  onShowChildrenToggle={() => onShowChildrenToggle(task)}
+                  onAddTaskPressed={onAddTaskPressed}
+                  showChildren={shouldShowChildren(task)}
+                  highlightedChange={highlightedChange}
+                  highlightSubtaskComparator={highlightSubtaskComparator}
+                  highlightTaskComparator={highlightTaskComparator}
+                />
+              </Box>
+            );
+          })}
+        </Box>
+        {currentTooltipOptions && (
+          <GanttToolTip
+            yCoordinate={cursorY}
+            title={currentTooltipOptions.name}
+            startDate={currentTooltipOptions.start}
+            endDate={currentTooltipOptions.end}
+            color={currentTooltipOptions.styles?.backgroundColor}
+            upperRightDisplay={currentTooltipOptions.tooltip?.upperRightDisplay}
+            lowerRightDisplay={currentTooltipOptions.tooltip?.lowerRightDisplay}
+          />
+        )}
       </Box>
-      {currentTooltipOptions && (
-        <GanttToolTip
-          yCoordinate={cursorY}
-          title={currentTooltipOptions.name}
-          startDate={currentTooltipOptions.start}
-          endDate={currentTooltipOptions.end}
-          color={currentTooltipOptions.styles?.backgroundColor}
-          upperRightDisplay={currentTooltipOptions.tooltip?.upperRightDisplay}
-          lowerRightDisplay={currentTooltipOptions.tooltip?.lowerRightDisplay}
-        />
-      )}
-    </Box>
+    </ArcherContainer>
   ) : (
     <Typography sx={{ marginTop: 5 }}>No Projects to Display</Typography>
   );
diff --git a/src/frontend/src/utils/gantt.utils.tsx b/src/frontend/src/utils/gantt.utils.tsx
index 2a8c06c499..bec4d16409 100644
--- a/src/frontend/src/utils/gantt.utils.tsx
+++ b/src/frontend/src/utils/gantt.utils.tsx
@@ -411,7 +411,7 @@ const getBlockingGanttTasks = <T extends WorkPackage>(
 
 export const transformTaskToGanttTask = <T extends Task>(task: T, end: Date): GanttTask<T> => {
   return {
-    id: uuidv4(),
+    id: task.taskId,
     element: task,
 
     name: task.title,
@@ -441,7 +441,7 @@ export const transformWorkPackageToGanttTask = <T extends WorkPackage>(
   allWorkPackages: T[]
 ): GanttTask<T> => {
   return {
-    id: uuidv4(),
+    id: workPackage.id,
     element: workPackage,
 
     name: workPackage.name,
@@ -477,7 +477,7 @@ export const transformProjectToGanttTask = (
   const taskList = hideTasks ? [] : project.tasks;
 
   return {
-    id: uuidv4(),
+    id: project.id,
     element: project,
 
     name: project.name,
@@ -485,9 +485,7 @@ export const transformProjectToGanttTask = (
     end: endDate,
     blocking: [],
     children: [
-      ...project.workPackages
-        .filter((workPackage) => workPackage.blockedBy.length === 0)
-        .map((workPackage) => transformWorkPackageToGanttTask(workPackage, project.workPackages)),
+      ...project.workPackages.map((workPackage) => transformWorkPackageToGanttTask(workPackage, project.workPackages)),
       ...taskList.map((task) => transformTaskToGanttTask(task, endDate))
     ],
     overlays: [