diff --git a/ui/src/pages/Text/TextEditor/index.tsx b/ui/src/pages/Text/TextEditor/index.tsx
index 2a7d9115..55f30cd5 100644
--- a/ui/src/pages/Text/TextEditor/index.tsx
+++ b/ui/src/pages/Text/TextEditor/index.tsx
@@ -42,7 +42,7 @@ const TextEditor: React.FC = () => {
 						}}
 						initialValue=""
 						init={{
-							height: "calc(100dvh - 135px)",
+							height: "calc(100dvh - 120px)",
 							wordcount_countcharacters: true,
 							menubar: true,
 							resize: false,
diff --git a/ui/src/pages/Tools/Diagramming/diagramming.module.scss b/ui/src/pages/Tools/Diagramming/diagramming.module.scss
index f92eed7a..e5b5daab 100644
--- a/ui/src/pages/Tools/Diagramming/diagramming.module.scss
+++ b/ui/src/pages/Tools/Diagramming/diagramming.module.scss
@@ -1,3 +1,3 @@
 .diagramming {
-	height: calc(100dvh - 110px);
+	height: calc(100dvh - 90px);
 }
diff --git a/ui/src/pages/Tools/Diagramming/index.tsx b/ui/src/pages/Tools/Diagramming/index.tsx
index bbc504e3..6c0eee79 100644
--- a/ui/src/pages/Tools/Diagramming/index.tsx
+++ b/ui/src/pages/Tools/Diagramming/index.tsx
@@ -1,10 +1,13 @@
 import { Excalidraw } from "@excalidraw/excalidraw";
 import style from "./diagramming.module.scss";
+import { useContext } from "react";
+import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 
 const Diagramming = () => {
+	const { isDarkMode } = useContext(DarkModeContext);
 	return (
 		<div className={style.diagramming}>
-			<Excalidraw />
+			<Excalidraw theme={isDarkMode ? "dark" : "light"} />
 		</div>
 	);
 };