diff --git a/ui/src/components/molecules/DAGActions.tsx b/ui/src/components/molecules/DAGActions.tsx
index 2b7bf5681..7f755f2c4 100644
--- a/ui/src/components/molecules/DAGActions.tsx
+++ b/ui/src/components/molecules/DAGActions.tsx
@@ -20,7 +20,7 @@ type LabelProps = {
 type Props = {
   status?: Status | WorkflowStatus;
   name: string;
-  dag: DAG | Workflow;
+  dag: DAG | Workflow | undefined;
   label?: boolean;
   redirectTo?: string;
   refresh?: () => void;
@@ -78,15 +78,11 @@ function DAGActions({
     [refresh]
   );
 
-  const buttonState = React.useMemo(
-    () => ({
-      start: status?.Status != SchedulerStatus.Running,
-      stop: status?.Status == SchedulerStatus.Running,
-      retry:
-        status?.Status != SchedulerStatus.Running && status?.RequestId != '',
-    }),
-    [status]
-  );
+  const buttonState = {
+    start: status?.Status != SchedulerStatus.Running,
+    stop: status?.Status == SchedulerStatus.Running,
+    retry: status?.Status != SchedulerStatus.Running && status?.RequestId != '',
+  };
   return (
     <Stack direction="row" spacing={2}>
       <ActionButton
@@ -166,17 +162,19 @@ function DAGActions({
           <Box>{status?.RequestId}</Box>
         </Stack>
       </ConfirmModal>
-      <StartDAGModal
-        dag={dag}
-        visible={isStartModal}
-        onSubmit={(params) => {
-          setIsStartModal(false);
-          onSubmit({ name: name, action: 'start', params: params });
-        }}
-        dismissModal={() => {
-          setIsStartModal(false);
-        }}
-      />
+      {dag && (
+        <StartDAGModal
+          dag={dag}
+          visible={isStartModal}
+          onSubmit={(params) => {
+            setIsStartModal(false);
+            onSubmit({ name: name, action: 'start', params: params });
+          }}
+          dismissModal={() => {
+            setIsStartModal(false);
+          }}
+        />
+      )}
     </Stack>
   );
 }
diff --git a/ui/src/components/molecules/DAGDefinition.tsx b/ui/src/components/molecules/DAGDefinition.tsx
index cc2a7e813..95da009db 100644
--- a/ui/src/components/molecules/DAGDefinition.tsx
+++ b/ui/src/components/molecules/DAGDefinition.tsx
@@ -25,16 +25,14 @@ function DAGDefinition({
       Prism.highlightAll();
     }
   }, [value]);
-  const className = React.useMemo(() => {
-    const classes = [`language-${language}`];
-    if (lineNumbers) {
-      classes.push('line-numbers');
-    }
-    if (keyword) {
-      classes.push(`keyword-${keyword}`);
-    }
-    return classes.join(' ');
-  }, [lineNumbers, keyword]);
+  const classes = [`language-${language}`];
+  if (lineNumbers) {
+    classes.push('line-numbers');
+  }
+  if (keyword) {
+    classes.push(`keyword-${keyword}`);
+  }
+  const className = classes.join(' ');
   return (
     <pre data-start={startLine || 1} data-line={highlightLine}>
       <code className={className}>{value}</code>
diff --git a/ui/src/components/molecules/DashboardTimechart.tsx b/ui/src/components/molecules/DashboardTimechart.tsx
index 684dbf994..8f9028c0f 100644
--- a/ui/src/components/molecules/DashboardTimechart.tsx
+++ b/ui/src/components/molecules/DashboardTimechart.tsx
@@ -85,10 +85,6 @@ function DashboardTimechart({ data: input }: Props) {
       timelineInstance.current.setItems(dataset);
     }
 
-    console.log(
-      {input, items}
-    )
-
     return () => {
       if (timelineInstance.current) {
         timelineInstance.current.destroy();
@@ -99,10 +95,7 @@ function DashboardTimechart({ data: input }: Props) {
 
   return (
     <TimelineWrapper>
-      <div
-        ref={timelineRef}
-        style={{ width: '100%', height: '100%' }}
-      />
+      <div ref={timelineRef} style={{ width: '100%', height: '100%' }} />
       <style>
         {`
         .vis-item .vis-item-overflow {
@@ -167,4 +160,4 @@ function TimelineWrapper({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default DashboardTimechart;
\ No newline at end of file
+export default DashboardTimechart;
diff --git a/ui/src/components/molecules/Graph.tsx b/ui/src/components/molecules/Graph.tsx
index b63dc0fbe..1af7a10fd 100644
--- a/ui/src/components/molecules/Graph.tsx
+++ b/ui/src/components/molecules/Graph.tsx
@@ -217,7 +217,7 @@ const calculateGraphBreadth = (steps: Step[] | Node[]) => {
 
   // Count nodes at each level
   const levelCounts = new Map<number, number>();
-  nodeLevels.forEach((level, _) => {
+  nodeLevels.forEach((level) => {
     levelCounts.set(level, (levelCounts.get(level) || 0) + 1);
   });
 
diff --git a/ui/src/components/molecules/HistoryTable.tsx b/ui/src/components/molecules/HistoryTable.tsx
index bf9fc6616..7387180ad 100644
--- a/ui/src/components/molecules/HistoryTable.tsx
+++ b/ui/src/components/molecules/HistoryTable.tsx
@@ -26,7 +26,7 @@ function HistoryTable({ logs, gridData, onSelect, idx }: Props) {
         <TableHead>
           <TableRow>
             <TableCell></TableCell>
-            {logs.map((log, i) => {
+            {logs.map((_, i) => {
               let date;
               const startedAt = logs[i].Status.StartedAt;
               if (startedAt && startedAt != '-') {
@@ -39,7 +39,7 @@ function HistoryTable({ logs, gridData, onSelect, idx }: Props) {
                 moment(logs[i - 1].Status.StartedAt).format('M/D') != date;
               return (
                 <TableCell
-                  key={log.Status.StartedAt}
+                  key={`date-${i}`}
                   style={colStyle}
                   onClick={() => {
                     onSelect(i);
diff --git a/ui/src/components/molecules/HistoryTableRow.tsx b/ui/src/components/molecules/HistoryTableRow.tsx
index 005087970..c47544793 100644
--- a/ui/src/components/molecules/HistoryTableRow.tsx
+++ b/ui/src/components/molecules/HistoryTableRow.tsx
@@ -11,13 +11,10 @@ type Props = {
 };
 
 function HistoryTableRow({ data, onSelect, idx }: Props) {
-  const vals = React.useMemo(() => {
-    return data.Vals.reverse();
-  }, [data]);
   return (
     <StyledTableRow>
       <TableCell>{data.Name}</TableCell>
-      {vals.map((status, i) => {
+      {[...data.Vals].reverse().map((status, i) => {
         const style: CSSProperties = { ...circleStyle };
         const tdStyle: CSSProperties = { maxWidth: '22px' };
         if (i == idx) {
diff --git a/ui/src/components/molecules/NodeStatusChip.tsx b/ui/src/components/molecules/NodeStatusChip.tsx
index c1b7d9251..552787bb9 100644
--- a/ui/src/components/molecules/NodeStatusChip.tsx
+++ b/ui/src/components/molecules/NodeStatusChip.tsx
@@ -9,9 +9,7 @@ type Props = {
 };
 
 function NodeStatusChip({ status, children }: Props) {
-  const style = React.useMemo(() => {
-    return nodeStatusColorMapping[status] || {};
-  }, [status]);
+  const style = nodeStatusColorMapping[status] || {};
   return <Chip sx={style} label={children} />;
 }
 
diff --git a/ui/src/components/molecules/NodeStatusTable.tsx b/ui/src/components/molecules/NodeStatusTable.tsx
index c9b0eb9fa..f2952041c 100644
--- a/ui/src/components/molecules/NodeStatusTable.tsx
+++ b/ui/src/components/molecules/NodeStatusTable.tsx
@@ -40,17 +40,12 @@ function NodeStatusTable({ nodes, status, name, refresh, file = '' }: Props) {
       setModal(true);
     }
   };
-  const dismissModal = React.useCallback(() => {
-    setModal(false);
-  }, [setModal]);
-  const onUpdateStatus = React.useCallback(
-    async (step: Step, action: string) => {
-      doPost(action, step.Name);
-      dismissModal();
-      refresh();
-    },
-    [refresh, dismissModal]
-  );
+  const dismissModal = () => setModal(false);
+  const onUpdateStatus = async (step: Step, action: string) => {
+    doPost(action, step.Name);
+    dismissModal();
+    refresh();
+  };
   const styles = stepTabColStyles;
   let i = 0;
   if (!nodes || !nodes.length) {
diff --git a/ui/src/components/organizations/DAGSpec.tsx b/ui/src/components/organizations/DAGSpec.tsx
index e543c9575..7fa72ea7f 100644
--- a/ui/src/components/organizations/DAGSpec.tsx
+++ b/ui/src/components/organizations/DAGSpec.tsx
@@ -197,7 +197,7 @@ function DAGSpec({ data }: Props) {
                     <DAGEditor
                       value={data.Definition}
                       onChange={(newValue) => {
-                        setCurrentValue(newValue);
+                        setCurrentValue(newValue || '');
                       }}
                     ></DAGEditor>
                   </Box>
diff --git a/ui/src/components/organizations/DAGStatus.tsx b/ui/src/components/organizations/DAGStatus.tsx
index 39936f439..e1941cca4 100644
--- a/ui/src/components/organizations/DAGStatus.tsx
+++ b/ui/src/components/organizations/DAGStatus.tsx
@@ -34,16 +34,11 @@ function DAGStatus({ DAG, name, refresh }: Props) {
     onSuccess: refresh,
     requestId: DAG.Status?.RequestId,
   });
-  const dismissModal = React.useCallback(() => {
-    setModal(false);
-  }, [setModal]);
-  const onUpdateStatus = React.useCallback(
-    async (step: Step, action: string) => {
-      doPost(action, step.Name);
-      dismissModal();
-    },
-    [refresh, dismissModal]
-  );
+  const dismissModal = () => setModal(false);
+  const onUpdateStatus = async (step: Step, action: string) => {
+    doPost(action, step.Name);
+    dismissModal();
+  };
   const onSelectStepOnGraph = React.useCallback(
     async (id: string) => {
       const status = DAG.Status?.Status;
@@ -63,13 +58,10 @@ function DAGStatus({ DAG, name, refresh }: Props) {
   );
   const [cookie, setCookie] = useCookies(['flowchart']);
   const [flowchart, setFlowchart] = React.useState(cookie['flowchart']);
-  const onChangeFlowchart = React.useCallback(
-    (value: FlowchartType) => {
-      setCookie('flowchart', value, { path: '/' });
-      setFlowchart(value);
-    },
-    [setCookie, flowchart, setFlowchart]
-  );
+  const onChangeFlowchart = (value: FlowchartType) => {
+    setCookie('flowchart', value, { path: '/' });
+    setFlowchart(value);
+  };
 
   if (!DAG.Status) {
     return null;
diff --git a/ui/src/components/organizations/ExecutionHistory.tsx b/ui/src/components/organizations/ExecutionHistory.tsx
index 694185a0c..26c89c901 100644
--- a/ui/src/components/organizations/ExecutionHistory.tsx
+++ b/ui/src/components/organizations/ExecutionHistory.tsx
@@ -8,6 +8,7 @@ import DAGStatusOverview from '../molecules/DAGStatusOverview';
 import SubTitle from '../atoms/SubTitle';
 import LoadingIndicator from '../atoms/LoadingIndicator';
 import HistoryTable from '../molecules/HistoryTable';
+import { DAGStatusContext } from '../../contexts/DAGStatusContext';
 
 type Props = {
   logData: LogData;
@@ -30,19 +31,20 @@ type HistoryTableProps = {
 };
 
 function DAGHistoryTable({ GridData, Logs }: HistoryTableProps) {
-  console.log(
-    { GridData, Logs },
-  )
-  const [idx, setIdx] = React.useState(Logs ?Logs.length - 1 : 0);
-  const logs = React.useMemo(() => {
-    return Logs;
-  }, [Logs]);
+  const [idx, setIdx] = React.useState(Logs ? Logs.length - 1 : 0);
+  const dagStatusContext = React.useContext(DAGStatusContext);
 
   let handlers: Node[] | null = null;
-  if (logs && logs.length > idx) {
-    handlers = Handlers(logs[idx].Status);
+  if (Logs && Logs.length > idx) {
+    handlers = Handlers(Logs[idx].Status);
   }
 
+  React.useEffect(() => {
+    if (Logs && Logs[idx]) {
+      dagStatusContext.setData(Logs[idx].Status);
+    }
+  }, [idx]);
+
   return (
     <DAGContext.Consumer>
       {(props) => (
@@ -50,21 +52,21 @@ function DAGHistoryTable({ GridData, Logs }: HistoryTableProps) {
           <Box>
             <SubTitle>Execution History</SubTitle>
             <HistoryTable
-              logs={logs|| []}
-              gridData={GridData|| []}
+              logs={Logs || []}
+              gridData={GridData || []}
               onSelect={setIdx}
               idx={idx}
             />
           </Box>
 
-          {logs && logs[idx] ? (
+          {Logs && Logs[idx] ? (
             <React.Fragment>
               <Box sx={{ mt: 3 }}>
                 <SubTitle>Status</SubTitle>
                 <Box sx={{ mt: 2 }}>
                   <DAGStatusOverview
-                    status={logs[idx].Status}
-                    file={logs[idx].File}
+                    status={Logs[idx].Status}
+                    file={Logs[idx].File}
                     {...props}
                   />
                 </Box>
@@ -73,9 +75,9 @@ function DAGHistoryTable({ GridData, Logs }: HistoryTableProps) {
                 <SubTitle>Steps</SubTitle>
                 <Box sx={{ mt: 2 }}>
                   <NodeStatusTable
-                    nodes={logs[idx].Status.Nodes}
-                    status={logs[idx].Status}
-                    file={logs[idx].File}
+                    nodes={Logs[idx].Status.Nodes}
+                    status={Logs[idx].Status}
+                    file={Logs[idx].File}
                     {...props}
                   />
                 </Box>
@@ -86,9 +88,9 @@ function DAGHistoryTable({ GridData, Logs }: HistoryTableProps) {
                   <SubTitle>Lifecycle Hooks</SubTitle>
                   <Box sx={{ mt: 2 }}>
                     <NodeStatusTable
-                      nodes={Handlers(logs[idx].Status)}
-                      file={logs[idx].File}
-                      status={logs[idx].Status}
+                      nodes={Handlers(Logs[idx].Status)}
+                      file={Logs[idx].File}
+                      status={Logs[idx].Status}
                       {...props}
                     />
                   </Box>
diff --git a/ui/src/contexts/DAGStatusContext.ts b/ui/src/contexts/DAGStatusContext.ts
new file mode 100644
index 000000000..e86e05923
--- /dev/null
+++ b/ui/src/contexts/DAGStatusContext.ts
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Status } from '../models';
+
+type DAGStatusContextType = {
+  data: Status | undefined;
+  setData(val: Status): void;
+};
+
+export const DAGStatusContext = React.createContext<DAGStatusContextType>({
+  data: undefined as Status | undefined,
+  setData: () => {
+    return;
+  },
+});
diff --git a/ui/src/pages/dags/dag/index.tsx b/ui/src/pages/dags/dag/index.tsx
index 25beb50e8..59b2ce615 100644
--- a/ui/src/pages/dags/dag/index.tsx
+++ b/ui/src/pages/dags/dag/index.tsx
@@ -16,7 +16,8 @@ import useSWR from 'swr';
 import StatusChip from '../../../components/atoms/StatusChip';
 import { CalendarToday, TimerSharp } from '@mui/icons-material';
 import moment from 'moment-timezone';
-import { SchedulerStatus } from '../../../models';
+import { SchedulerStatus, Status } from '../../../models';
+import { DAGStatusContext } from '../../../contexts/DAGStatusContext';
 
 type Params = {
   name: string;
@@ -28,10 +29,7 @@ function DAGDetails() {
   const appBarContext = React.useContext(AppBarContext);
   const { pathname } = useLocation();
 
-  const baseUrl = useMemo(
-    () => `/dags/${encodeURI(params.name!)}`,
-    [params.name]
-  );
+  const baseUrl = `/dags/${encodeURI(params.name!)}`;
   const { data, isValidating, mutate } = useSWR<GetDAGResponse>(
     `/dags/${params.name}?tab=${params.tab ?? ''}&${new URLSearchParams(
       window.location.search
@@ -41,6 +39,7 @@ function DAGDetails() {
       refreshInterval: 2000,
     }
   );
+  const [status, setStatus] = React.useState<Status | undefined>();
 
   const refreshFn = React.useCallback(() => {
     setTimeout(() => mutate(), 500);
@@ -49,6 +48,7 @@ function DAGDetails() {
   React.useEffect(() => {
     if (data) {
       appBarContext.setTitle(data.Title);
+      setStatus(data.DAG?.Status);
     }
   }, [data, appBarContext]);
 
@@ -66,6 +66,11 @@ function DAGDetails() {
     name: params.name,
   };
 
+  const statusCtx = {
+    data: status,
+    setData: setStatus,
+  };
+
   const formatDuration = (startDate: string, endDate: string) => {
     if (!startDate || !endDate) return '--';
     const duration = moment.duration(moment(endDate).diff(moment(startDate)));
@@ -83,111 +88,124 @@ function DAGDetails() {
 
   return (
     <DAGContext.Provider value={ctx}>
-      <Stack
-        sx={{
-          width: '100%',
-          direction: 'column',
-        }}
-      >
-        <Box
+      <DAGStatusContext.Provider value={statusCtx}>
+        <Stack
           sx={{
-            mx: 4,
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
+            width: '100%',
+            direction: 'column',
           }}
         >
-          <Title>{data.Title}</Title>
-          <DAGActions
-            status={data.DAG.Status}
-            dag={data.DAG.DAG}
-            name={params.name!}
-            refresh={refreshFn}
-            redirectTo={`${baseUrl}`}
-          />
-        </Box>
-
-        {data.DAG?.Status?.Status != SchedulerStatus.None ? (
-          <Stack
-            direction="row"
-            spacing={2}
-            sx={{ mx: 4, alignItems: 'center' }}
+          <Box
+            sx={{
+              mx: 4,
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
           >
-            {data.DAG?.Status?.Status ? (
-              <StatusChip status={data.DAG.Status.Status}>
-                {data.DAG.Status.StatusText || ''}
-              </StatusChip>
-            ) : null}
-
+            <Title>{data.Title}</Title>
+            <DAGStatusContext.Consumer>
+              {(status) => (
+                <DAGActions
+                  status={status.data}
+                  dag={data?.DAG?.DAG}
+                  name={params.name!}
+                  refresh={refreshFn}
+                  redirectTo={`${baseUrl}`}
+                />
+              )}
+            </DAGStatusContext.Consumer>
+          </Box>
+
+          {data.DAG?.Status?.Status != SchedulerStatus.None ? (
             <Stack
               direction="row"
-              color={'text.secondary'}
-              sx={{ alignItems: 'center', ml: 1 }}
+              spacing={2}
+              sx={{ mx: 4, alignItems: 'center' }}
             >
-              <CalendarToday sx={{ mr: 0.5 }} />
-              {data?.DAG?.Status?.FinishedAt
-                ? moment(data.DAG.Status.FinishedAt).format(
-                    'MMM D, YYYY HH:mm:ss Z'
-                  )
-                : '--'}
+              {data.DAG?.Status?.Status ? (
+                <StatusChip status={data.DAG.Status.Status}>
+                  {data.DAG.Status.StatusText || ''}
+                </StatusChip>
+              ) : null}
+
+              <Stack
+                direction="row"
+                color={'text.secondary'}
+                sx={{ alignItems: 'center', ml: 1 }}
+              >
+                <CalendarToday sx={{ mr: 0.5 }} />
+                {data?.DAG?.Status?.FinishedAt
+                  ? moment(data.DAG.Status.FinishedAt).format(
+                      'MMM D, YYYY HH:mm:ss Z'
+                    )
+                  : '--'}
+              </Stack>
+
+              <Stack
+                direction="row"
+                color={'text.secondary'}
+                sx={{ alignItems: 'center', ml: 1 }}
+              >
+                <TimerSharp sx={{ mr: 0.5 }} />
+                {data?.DAG?.Status?.FinishedAt
+                  ? formatDuration(
+                      data?.DAG?.Status?.StartedAt,
+                      data?.DAG?.Status?.FinishedAt
+                    )
+                  : data?.DAG?.Status?.StartedAt
+                  ? formatDuration(
+                      data?.DAG?.Status?.StartedAt,
+                      moment().toISOString()
+                    )
+                  : '--'}
+              </Stack>
             </Stack>
+          ) : null}
 
-            <Stack
-              direction="row"
-              color={'text.secondary'}
-              sx={{ alignItems: 'center', ml: 1 }}
-            >
-              <TimerSharp sx={{ mr: 0.5 }} />
-              {data?.DAG?.Status?.FinishedAt
-                ? formatDuration(
-                    data?.DAG?.Status?.StartedAt,
-                    data?.DAG?.Status?.FinishedAt
-                  )
-                : data?.DAG?.Status?.StartedAt
-                ? formatDuration(
-                    data?.DAG?.Status?.StartedAt,
-                    moment().toISOString()
-                  )
-                : '--'}
-            </Stack>
+          <Stack
+            sx={{
+              mx: 4,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Tabs value={`${pathname}`}>
+              <LinkTab label="Status" value={`${baseUrl}`} />
+              <LinkTab label="Spec" value={`${baseUrl}/spec`} />
+              <LinkTab label="History" value={`${baseUrl}/history`} />
+              {pathname == `${baseUrl}/log` ||
+              pathname == `${baseUrl}/scheduler-log` ? (
+                <Tab label="Log" value={pathname} />
+              ) : null}
+            </Tabs>
+            {pathname == `${baseUrl}/spec` ? (
+              <DAGEditButtons name={params.name} />
+            ) : null}
           </Stack>
-        ) : null}
 
-        <Stack
-          sx={{
-            mx: 4,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Tabs value={`${pathname}`}>
-            <LinkTab label="Status" value={`${baseUrl}`} />
-            <LinkTab label="Spec" value={`${baseUrl}/spec`} />
-            <LinkTab label="History" value={`${baseUrl}/history`} />
-            {pathname == `${baseUrl}/log` ||
-            pathname == `${baseUrl}/scheduler-log` ? (
-              <Tab label="Log" value={pathname} />
+          <Box sx={{ mx: 4, flex: 1 }}>
+            {tab == 'status' ? (
+              <DAGStatus
+                DAG={data.DAG}
+                name={params.name}
+                refresh={refreshFn}
+              />
             ) : null}
-          </Tabs>
-          {pathname == `${baseUrl}/spec` ? (
-            <DAGEditButtons name={params.name} />
-          ) : null}
+            {tab == 'spec' ? <DAGSpec data={data} /> : null}
+            {tab == 'history' ? (
+              <ExecutionHistory
+                logData={data.LogData}
+                isLoading={isValidating}
+              />
+            ) : null}
+            {tab == 'scheduler-log' ? <ExecutionLog log={data.ScLog} /> : null}
+            {tab == 'log' ? <ExecutionLog log={data.StepLog} /> : null}
+          </Box>
         </Stack>
-
-        <Box sx={{ mx: 4, flex: 1 }}>
-          {tab == 'status' ? (
-            <DAGStatus DAG={data.DAG} name={params.name} refresh={refreshFn} />
-          ) : null}
-          {tab == 'spec' ? <DAGSpec data={data} /> : null}
-          {tab == 'history' ? (
-            <ExecutionHistory logData={data.LogData} isLoading={isValidating} />
-          ) : null}
-          {tab == 'scheduler-log' ? <ExecutionLog log={data.ScLog} /> : null}
-          {tab == 'log' ? <ExecutionLog log={data.StepLog} /> : null}
-        </Box>
-      </Stack>
+      </DAGStatusContext.Provider>
     </DAGContext.Provider>
   );
 }