diff --git a/packages/zapp/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx b/packages/zapp/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx
index ecedabf25..197e34698 100644
--- a/packages/zapp/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx
+++ b/packages/zapp/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx
@@ -22,7 +22,7 @@ const workflow: Workflow = {
 };
 
 const onNodeSelectionChanged = action('nodeSelected');
-const onMapTaskSelectionChanged = action('mapTaskSelected');
+const onPhaseSelectionChanged = action('phaseSelected');
 
 const cache = createCache();
 const taskTemplates = extractTaskTemplates(workflow);
@@ -38,6 +38,7 @@ stories.addDecorator((story) => (
         right: '35vw',
         left: 0,
         bottom: 0,
+        height: '450px',
       }}
     >
       <CacheContext.Provider value={cache}>{story()}</CacheContext.Provider>
@@ -49,7 +50,8 @@ stories.addDecorator((story) => (
 stories.add('TaskNodeRenderer', () => (
   <WorkflowGraph
     onNodeSelectionChanged={onNodeSelectionChanged}
-    onMapTaskSelectionChanged={onMapTaskSelectionChanged}
+    onPhaseSelectionChanged={onPhaseSelectionChanged}
     workflow={workflow}
+    isDetailsTabClosed={true}
   />
 ));
diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx
index 7735be04d..2fb41b801 100644
--- a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx
+++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx
@@ -146,6 +146,7 @@ const ReactFlowGraphComponent = (props) => {
     flexDirection: 'column',
     minHeight: '100px',
     minWidth: '200px',
+    height: '100%',
   };
 
   const renderGraph = () => {
diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx
index a62901298..8e815ad34 100644
--- a/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx
+++ b/packages/zapp/console/src/components/flytegraph/ReactFlow/utils.tsx
@@ -154,6 +154,9 @@ export const getGraphNodeStyle = (
   type: dTypes,
   nodeExecutionStatus?: NodeExecutionPhase,
 ): CSSProperties => {
+  // getStatusColor accepts undefined, and falls back to default gray color
+  const nodePrimaryColor = getStatusColor(nodeExecutionStatus);
+
   /** Base styles for displaying graph nodes */
   const baseStyle = {
     boxShadow: '1px 3px 5px rgba(0,0,0,.2)',
@@ -161,7 +164,7 @@ export const getGraphNodeStyle = (
     fontSize: '.6rem',
     color: '#323232',
     borderRadius: '.25rem',
-    border: '.15rem solid #555',
+    border: `.15rem solid ${nodePrimaryColor}`,
     background: '#fff',
     minWidth: '.5rem',
     minHeight: '.5rem',
@@ -186,11 +189,6 @@ export const getGraphNodeStyle = (
     color: '#fff',
   };
 
-  let nodePrimaryColor = '';
-  if (nodeExecutionStatus) {
-    nodePrimaryColor = getStatusColor(nodeExecutionStatus);
-  }
-
   /** Override the base styles with node-type specific styles */
   const overrideStyles = {
     start: {
diff --git a/packages/zapp/console/src/components/flytegraph/__stories__/CustomNodes.stories.tsx b/packages/zapp/console/src/components/flytegraph/__stories__/CustomNodes.stories.tsx
new file mode 100644
index 000000000..52fe28b1f
--- /dev/null
+++ b/packages/zapp/console/src/components/flytegraph/__stories__/CustomNodes.stories.tsx
@@ -0,0 +1,149 @@
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { RENDER_ORDER } from 'components/Executions/TaskExecutionsList/constants';
+import { NodeExecutionDisplayType } from 'components/Executions/types';
+import { getTaskExecutionPhaseConstants } from 'components/Executions/utils';
+import { CatalogCacheStatus, NodeExecutionPhase } from 'models/Execution/enums';
+import { TaskType } from 'models/Task/constants';
+import * as React from 'react';
+import { ReactFlowProvider } from 'react-flow-renderer';
+import { ReactFlowCustomTaskNode } from '../ReactFlow/customNodeComponents';
+
+const stories = storiesOf('CustomNodes', module);
+stories.addDecorator((story) => (
+  <>
+    <ReactFlowProvider>{story()}</ReactFlowProvider>
+  </>
+));
+
+const commonData = {
+  onNodeSelectionChanged: action('nodeSelected'),
+  onPhaseSelectionChanged: action('phaseSelected'),
+  scopedId: 'n0',
+};
+
+const taskData = {
+  ...commonData,
+  nodeType: NodeExecutionDisplayType.PythonTask,
+  taskType: TaskType.PYTHON,
+  cacheStatus: 0,
+};
+
+stories.add('Task Node', () => (
+  <>
+    {RENDER_ORDER.map((phase, i) => (
+      <div
+        style={{
+          position: 'absolute',
+          top: 40 * i + 20,
+          left: 20,
+        }}
+        key={phase}
+      >
+        <ReactFlowCustomTaskNode
+          data={{
+            ...taskData,
+            nodeExecutionStatus: phase,
+            text: getTaskExecutionPhaseConstants(phase).text,
+          }}
+        />
+      </div>
+    ))}
+  </>
+));
+
+const cachedTaskData = {
+  ...commonData,
+  nodeType: NodeExecutionDisplayType.PythonTask,
+  nodeExecutionStatus: NodeExecutionPhase.SUCCEEDED,
+  taskType: TaskType.PYTHON,
+};
+
+const CACHE_STATUSES = [
+  { status: CatalogCacheStatus.CACHE_DISABLED, text: 'cache disabled' },
+  { status: CatalogCacheStatus.CACHE_HIT, text: 'cache hit' },
+  { status: CatalogCacheStatus.CACHE_LOOKUP_FAILURE, text: 'cache lookup failure' },
+  { status: CatalogCacheStatus.CACHE_MISS, text: 'cache miss' },
+  { status: CatalogCacheStatus.CACHE_POPULATED, text: 'cache populated' },
+  { status: CatalogCacheStatus.CACHE_PUT_FAILURE, text: 'cache put failure' },
+];
+
+stories.add('Task Node by Cache Status', () => (
+  <>
+    {CACHE_STATUSES.map((cacheStatus, i) => (
+      <div
+        style={{
+          position: 'absolute',
+          top: 40 * i + 20,
+          left: 20,
+        }}
+        key={cacheStatus.text}
+      >
+        <ReactFlowCustomTaskNode
+          data={{
+            ...cachedTaskData,
+            cacheStatus: cacheStatus.status,
+            text: cacheStatus.text,
+          }}
+        />
+      </div>
+    ))}
+  </>
+));
+
+const logsByPhase = new Map();
+logsByPhase.set(5, [
+  {
+    uri: '#',
+    name: 'Kubernetes Logs #0-0-1',
+    messageFormat: 2,
+  },
+  {
+    uri: '#',
+    name: 'Kubernetes Logs #0-1',
+    messageFormat: 2,
+  },
+]);
+logsByPhase.set(2, [
+  {
+    uri: '#',
+    name: 'Kubernetes Logs #0-2-1',
+    messageFormat: 2,
+  },
+]);
+logsByPhase.set(6, [
+  {
+    name: 'ff21a6480a4c84742ad4-n0-0-3',
+  },
+]);
+
+const mapTaskData = {
+  ...commonData,
+  nodeType: NodeExecutionDisplayType.MapTask,
+  taskType: TaskType.ARRAY,
+  cacheStatus: 0,
+  nodeLogsByPhase: logsByPhase,
+};
+
+stories.add('Map Task Node', () => (
+  <>
+    {RENDER_ORDER.map((phase, i) => (
+      <div
+        style={{
+          position: 'absolute',
+          top: 45 * i + 20,
+          left: 20,
+        }}
+        key={phase}
+      >
+        <ReactFlowCustomTaskNode
+          data={{
+            ...mapTaskData,
+            nodeExecutionStatus: phase,
+            text: getTaskExecutionPhaseConstants(phase).text,
+          }}
+        />
+      </div>
+    ))}
+  </>
+));