diff --git a/apps/dep-graph-client/src/app/styles-graph/edges.ts b/apps/dep-graph-client/src/app/styles-graph/edges.ts
index 342433d765..3ed6b53730 100644
--- a/apps/dep-graph-client/src/app/styles-graph/edges.ts
+++ b/apps/dep-graph-client/src/app/styles-graph/edges.ts
@@ -1,23 +1,23 @@
 import { Stylesheet } from 'cytoscape';
-import { NrwlPallette } from './pallette';
+import { NrwlPalette } from './palette';
 
 const allEdges: Stylesheet = {
   selector: 'edge',
   style: {
     width: '1px',
-    'line-color': NrwlPallette.black,
+    'line-color': NrwlPalette.black,
     'curve-style': 'straight',
     'target-arrow-shape': 'triangle',
     'target-arrow-fill': 'filled',
-    'target-arrow-color': NrwlPallette.black,
+    'target-arrow-color': NrwlPalette.black,
   },
 };
 
 const affectedEdges: Stylesheet = {
   selector: 'edge.affected',
   style: {
-    'line-color': NrwlPallette.red,
-    'target-arrow-color': NrwlPallette.red,
+    'line-color': NrwlPalette.red,
+    'target-arrow-color': NrwlPalette.red,
   },
 };
 
diff --git a/apps/dep-graph-client/src/app/styles-graph/nodes.ts b/apps/dep-graph-client/src/app/styles-graph/nodes.ts
index 2217e36ae2..f63e5cd023 100644
--- a/apps/dep-graph-client/src/app/styles-graph/nodes.ts
+++ b/apps/dep-graph-client/src/app/styles-graph/nodes.ts
@@ -1,6 +1,6 @@
 import { Stylesheet } from 'cytoscape';
 import { FONTS } from './fonts';
-import { NrwlPallette } from './pallette';
+import { NrwlPalette } from './palette';
 
 const allNodes: Stylesheet = {
   selector: 'node',
@@ -8,14 +8,14 @@ const allNodes: Stylesheet = {
     'font-size': '32px',
     'font-family': FONTS,
     'border-style': 'solid',
-    'border-color': NrwlPallette.black,
+    'border-color': NrwlPalette.black,
     'border-width': '1px',
     'text-halign': 'center',
     'text-valign': 'center',
     'padding-left': '16px',
     label: 'data(id)',
     width: 'label',
-    backgroundColor: NrwlPallette.white,
+    backgroundColor: NrwlPalette.white,
   },
 };
 
@@ -43,15 +43,15 @@ const e2eNodes: Stylesheet = {
 const focusedNodes: Stylesheet = {
   selector: 'node.focused',
   style: {
-    color: NrwlPallette.twilight,
-    'border-color': NrwlPallette.twilight,
+    color: NrwlPalette.twilight,
+    'border-color': NrwlPalette.twilight,
   },
 };
 
 const affectedNodes: Stylesheet = {
   selector: 'node.affected',
   style: {
-    'border-color': NrwlPallette.red,
+    'border-color': NrwlPalette.red,
   },
 };
 
@@ -59,8 +59,8 @@ const parentNodes: Stylesheet = {
   selector: ':parent',
   style: {
     'background-opacity': 0.5,
-    'background-color': NrwlPallette.twilight,
-    'border-color': NrwlPallette.black,
+    'background-color': NrwlPalette.twilight,
+    'border-color': NrwlPalette.black,
     label: 'data(label)',
     'text-halign': 'center',
     'text-valign': 'top',
diff --git a/apps/dep-graph-client/src/app/styles-graph/pallette.ts b/apps/dep-graph-client/src/app/styles-graph/palette.ts
similarity index 86%
rename from apps/dep-graph-client/src/app/styles-graph/pallette.ts
rename to apps/dep-graph-client/src/app/styles-graph/palette.ts
index e59ba5aab2..ef5e4aba5e 100644
--- a/apps/dep-graph-client/src/app/styles-graph/pallette.ts
+++ b/apps/dep-graph-client/src/app/styles-graph/palette.ts
@@ -1,4 +1,4 @@
-export enum NrwlPallette {
+export enum NrwlPalette {
   blue = '#48c4e5',
   lightBlue = '#96d8e9',
   gray = '#333333',