diff --git a/graph/client/.storybook/preview.js b/graph/client/.storybook/preview.js
index 7ecdbaf4b9b62..d360dc71d7320 100644
--- a/graph/client/.storybook/preview.js
+++ b/graph/client/.storybook/preview.js
@@ -1,4 +1,4 @@
-import '../src/styles.scss';
+import '../src/styles.css';
 
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
diff --git a/graph/client/project.json b/graph/client/project.json
index ceddf5e0e717b..1ebfadac7f328 100644
--- a/graph/client/project.json
+++ b/graph/client/project.json
@@ -39,7 +39,7 @@
         "main": "graph/client/src/main.tsx",
         "polyfills": "graph/client/src/polyfills.ts",
         "tsConfig": "graph/client/tsconfig.app.json",
-        "styles": ["graph/client/src/styles.scss"],
+        "styles": ["graph/client/src/styles.css"],
         "scripts": [],
         "assets": [],
         "webpackConfig": "graph/client/webpack.config.js",
diff --git a/graph/client/src/app/shell.tsx b/graph/client/src/app/shell.tsx
index c6ac4c818bf75..92fa2089edcd0 100644
--- a/graph/client/src/app/shell.tsx
+++ b/graph/client/src/app/shell.tsx
@@ -175,7 +175,10 @@ export function Shell(): JSX.Element {
         ) : null}
 
         <div className="h-full w-full">
-          <div className="h-full w-full" id="cytoscape-graph"></div>
+          <div
+            className="h-full w-full cursor-pointer"
+            id="cytoscape-graph"
+          ></div>
           <TooltipDisplay></TooltipDisplay>
 
           <Tooltip
diff --git a/graph/client/src/app/theme-resolver.tsx b/graph/client/src/app/theme-resolver.tsx
index 0f97128b3a57c..1c71576fdc23f 100644
--- a/graph/client/src/app/theme-resolver.tsx
+++ b/graph/client/src/app/theme-resolver.tsx
@@ -7,10 +7,20 @@ export let currentTheme: Theme;
 
 function mediaListener(ev: MediaQueryListEvent) {
   const resolver = ev.matches ? 'dark' : 'light';
-  htmlEl.className = resolver;
+  toggleHtmlClass(resolver);
   currentTheme = resolver;
 }
 
+function toggleHtmlClass(theme: Theme) {
+  if (theme === 'dark') {
+    htmlEl.classList.add('dark');
+    htmlEl.classList.remove('light');
+  } else {
+    htmlEl.classList.add('light');
+    htmlEl.classList.remove('dark');
+  }
+}
+
 export function themeInit() {
   const theme =
     (localStorage.getItem(localStorageThemeKey) as Theme) ?? 'system';
@@ -25,13 +35,13 @@ export function themeResolver(theme: Theme) {
   const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
   if (theme !== 'system') {
     darkMedia.removeEventListener('change', mediaListener);
-    htmlEl.className = theme;
+    toggleHtmlClass(theme);
     currentTheme = theme;
   } else {
     const resolver = darkMedia.matches ? 'dark' : 'light';
 
     darkMedia.addEventListener('change', mediaListener);
-    htmlEl.className = resolver;
+    toggleHtmlClass(resolver);
     currentTheme = resolver;
   }
 
diff --git a/graph/client/src/index.html b/graph/client/src/index.html
index 9e4b2327f72bc..63a22e07a22ba 100644
--- a/graph/client/src/index.html
+++ b/graph/client/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full w-full overflow-hidden">
   <head>
     <meta charset="utf-8" />
     <title>Nx Workspace Project Graph</title>
@@ -25,7 +25,9 @@
     </script>
   </head>
 
-  <body class="bg-white text-slate-500 dark:bg-slate-900 dark:text-slate-400">
-    <div id="app"></div>
+  <body
+    class="h-full w-full overflow-hidden bg-white text-slate-500 dark:bg-slate-900 dark:text-slate-400"
+  >
+    <div class="flex h-full w-full overflow-hidden p-0" id="app"></div>
   </body>
 </html>
diff --git a/graph/client/src/styles.css b/graph/client/src/styles.css
new file mode 100644
index 0000000000000..e05ff27327062
--- /dev/null
+++ b/graph/client/src/styles.css
@@ -0,0 +1,8 @@
+@tailwind components;
+@tailwind base;
+@tailwind utilities;
+
+/** Scrollbars **/
+.dark {
+  color-scheme: dark;
+}
diff --git a/graph/client/src/styles.scss b/graph/client/src/styles.scss
deleted file mode 100644
index 4674d2cf6df53..0000000000000
--- a/graph/client/src/styles.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
-
-/** Scrollbars **/
-.dark {
-  color-scheme: dark;
-}
-
-#app,
-body,
-html {
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  width: 100%;
-}
-
-#app {
-  display: flex;
-}
-
-canvas {
-  cursor: pointer;
-}
diff --git a/graph/ui-graph/src/lib/nx-project-graph-viz.tsx b/graph/ui-graph/src/lib/nx-project-graph-viz.tsx
index 72da6ebda631e..f49698ea5020e 100644
--- a/graph/ui-graph/src/lib/nx-project-graph-viz.tsx
+++ b/graph/ui-graph/src/lib/nx-project-graph-viz.tsx
@@ -114,7 +114,7 @@ export function NxProjectGraphViz({
     <div className="not-prose">
       <div
         ref={containerRef}
-        className="w-full"
+        className="w-full cursor-pointer"
         style={{ width: '100%', height }}
       ></div>
       {tooltipToRender ? (
diff --git a/graph/ui-graph/src/lib/nx-task-graph-viz.tsx b/graph/ui-graph/src/lib/nx-task-graph-viz.tsx
index 07d2c7e6075d9..5c02cb4310d55 100644
--- a/graph/ui-graph/src/lib/nx-task-graph-viz.tsx
+++ b/graph/ui-graph/src/lib/nx-task-graph-viz.tsx
@@ -99,7 +99,7 @@ export function NxTaskGraphViz({
     <div className="not-prose">
       <div
         ref={containerRef}
-        className="w-full"
+        className="w-full cursor-pointer"
         style={{ width: '100%', height }}
       ></div>
       {tooltipToRender ? (
