diff --git a/package.json b/package.json
index 5f2235a..dc6adf1 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "homepage": "https://circleci-public.github.io/visual-config-editor/",
   "dependencies": {
-    "@circleci/circleci-config-sdk": "0.7.0",
+    "@circleci/circleci-config-sdk": "0.8.0",
     "@craco/craco": "^6.3.0",
     "@monaco-editor/react": "^4.3.1",
     "@testing-library/jest-dom": "^5.11.4",
diff --git a/src/components/atoms/nodes/JobNode.tsx b/src/components/atoms/nodes/JobNode.tsx
index fa893f2..095f94b 100644
--- a/src/components/atoms/nodes/JobNode.tsx
+++ b/src/components/atoms/nodes/JobNode.tsx
@@ -1,4 +1,5 @@
-import { Job, WorkflowJob } from '@circleci/circleci-config-sdk';
+import { Job } from '@circleci/circleci-config-sdk';
+import { WorkflowJob } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Workflow';
 import { WorkflowJobParameters } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Workflow/types/WorkflowJob.types';
 import React, { useRef } from 'react';
 import { Handle, isNode, NodeProps, Position } from 'react-flow-renderer';
@@ -20,8 +21,10 @@ const JobNode: React.FunctionComponent<NodeProps & { data: WorkflowJob }> = (
   // );
   const updateJob = useStoreActions((actions) => actions.updateJob);
   const setConnecting = useStoreActions((actions) => actions.setConnecting);
-  const removeWorkflowElement = useStoreActions((actions) => actions.removeWorkflowElement);
-  
+  const removeWorkflowElement = useStoreActions(
+    (actions) => actions.removeWorkflowElement,
+  );
+
   const connecting = useStoreState((state) => state.connecting);
   const updateConnecting = useStoreActions(
     (actions) => actions.updateConnecting,
diff --git a/src/mappings/ExecutorMapping.tsx b/src/mappings/ExecutorMapping.tsx
index 651b1ed..38f205d 100644
--- a/src/mappings/ExecutorMapping.tsx
+++ b/src/mappings/ExecutorMapping.tsx
@@ -3,7 +3,7 @@ import {
   Job,
   parsers,
   reusable,
-  WorkflowJob,
+  workflow,
 } from '@circleci/circleci-config-sdk';
 import ExecutorSummary from '../components/atoms/summaries/ExecutorSummary';
 import ExecutorInspector from '../components/containers/inspector/ExecutorInspector';
@@ -23,7 +23,7 @@ export type AnyExecutor =
 
 const ExecutorMapping: ComponentMapping<
   reusable.ReusableExecutor,
-  WorkflowJob
+  workflow.WorkflowJob
 > = {
   type: 'executors',
   name: {
@@ -79,7 +79,7 @@ const ExecutorMapping: ComponentMapping<
   applyToNode: (data, nodeData) => {
     const oldJob = nodeData.job;
 
-    return new WorkflowJob(
+    return new workflow.WorkflowJob(
       new Job(oldJob.name, data.reuse(), oldJob.steps),
       nodeData.parameters,
     );
diff --git a/src/mappings/JobMapping.tsx b/src/mappings/JobMapping.tsx
index 517a3f6..74a61c2 100644
--- a/src/mappings/JobMapping.tsx
+++ b/src/mappings/JobMapping.tsx
@@ -1,4 +1,4 @@
-import { Job, parsers, WorkflowJob } from '@circleci/circleci-config-sdk';
+import { Job, parsers, workflow } from '@circleci/circleci-config-sdk';
 import JobNode from '../components/atoms/nodes/JobNode';
 import JobSummary from '../components/atoms/summaries/JobSummary';
 import JobInspector from '../components/containers/inspector/JobInspector';
@@ -6,7 +6,7 @@ import { componentParametersSubtypes } from '../components/containers/inspector/
 import JobIcon from '../icons/components/JobIcon';
 import ComponentMapping from './ComponentMapping';
 
-const JobMapping: ComponentMapping<Job, WorkflowJob> = {
+const JobMapping: ComponentMapping<Job, workflow.WorkflowJob> = {
   type: 'jobs',
   name: {
     singular: 'Job',
@@ -22,7 +22,7 @@ const JobMapping: ComponentMapping<Job, WorkflowJob> = {
    dependsOn: (definitions) => [definitions.commands, definitions.executors],
    */
   transform: ({ name, ...values }, definitions) => {
-    console.log(values)
+    console.log(values);
 
     return parsers.parseJob(
       name,
@@ -42,7 +42,7 @@ const JobMapping: ComponentMapping<Job, WorkflowJob> = {
   dragTarget: 'workflow',
   node: {
     transform: (data, params) => {
-      return new WorkflowJob(data, params);
+      return new workflow.WorkflowJob(data, params);
     },
     component: JobNode,
   },
diff --git a/src/state/Store.tsx b/src/state/Store.tsx
index efc0173..1b5cb11 100644
--- a/src/state/Store.tsx
+++ b/src/state/Store.tsx
@@ -5,7 +5,7 @@ import {
   parsers,
   reusable,
   Workflow,
-  WorkflowJob,
+  workflow,
 } from '@circleci/circleci-config-sdk';
 import { CustomCommand } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Commands/exports/Reusable';
 import { CustomParameter } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Parameters';
@@ -379,11 +379,20 @@ const Actions: StoreActions = {
       const nodeWidth = 250; // Make this dynamic
       const nodeHeight = 60; // Make this dynamic
 
+      const getJobName = (workflowJob: workflow.WorkflowJobAbstract) => {
+        const baseName =
+          workflowJob instanceof workflow.WorkflowJob
+            ? workflowJob.job.name
+            : (workflowJob as workflow.WorkflowJobApproval).name;
+
+        return workflowJob.parameters?.name || baseName;
+      };
+
       state.workflows = config.workflows.map(({ name, jobs }) => {
-        const jobTable: Record<string, WorkflowJob> = {};
+        const jobTable: Record<string, workflow.WorkflowJobAbstract> = {};
 
         jobs.forEach((workflowJob) => {
-          const jobName = workflowJob.parameters.name || workflowJob.job.name;
+          const jobName = getJobName(workflowJob);
           jobTable[jobName] = workflowJob;
         });
 
@@ -391,8 +400,8 @@ const Actions: StoreActions = {
         const columns: Array<number> = [];
         const solved: Record<ElementId, number> = {};
 
-        const solve = (workflowJob: WorkflowJob) => {
-          const jobName = workflowJob.parameters.name || workflowJob.job.name;
+        const solve = (workflowJob: workflow.WorkflowJobAbstract) => {
+          const jobName = getJobName(workflowJob);
 
           if (solved[jobName] !== undefined) {
             return solved[jobName];
@@ -400,7 +409,7 @@ const Actions: StoreActions = {
 
           let column = 0;
 
-          if (workflowJob.parameters.requires) {
+          if (workflowJob.parameters?.requires) {
             let greatestColumn = 0;
 
             workflowJob.parameters.requires.forEach((requiredJob) => {
diff --git a/yarn.lock b/yarn.lock
index de4951a..185a085 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1081,10 +1081,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@circleci/circleci-config-sdk@0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@circleci/circleci-config-sdk/-/circleci-config-sdk-0.7.0.tgz#561584b8ab18fd9e92d40f357e5d3086d976fe9a"
-  integrity sha512-43+WMaMlmmwOJdhSCi7OELukCwkedskw8XLGFNHKR2kmH/ADEbeOurkB0wefZq9mOe9h2zpmnYRi1lYnIndpMQ==
+"@circleci/circleci-config-sdk@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@circleci/circleci-config-sdk/-/circleci-config-sdk-0.8.0.tgz#85fe0c1accdcc189a2b24cf02fcab772ee166ba5"
+  integrity sha512-euVMPlejGzREZvsHdmPMidgcabAAlu+bQhUsxFfRjPjo55nAUWMe4Sxwb3gKeSKe8R3sJFvKsFfKprDW1fIDVQ==
   dependencies:
     ajv "^8.8.2"
     ajv-merge-patch "^5.0.1"