diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index 9e4dee0996..993c022899 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -1,3 +1,4 @@
+@import "./style/custom-ace-overrides.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 05a459a76e..544d394e2e 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -6,7 +6,7 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/ext-searchbox";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
-import "ace-builds/src-noconflict/theme-twilight";
+import "ace-builds/src-noconflict/theme-monokai";
 import { useEffect, useRef, useState } from "react";
 import AceEditor from "react-ace";
 import type ReactAce from "react-ace/lib/ace";
@@ -221,7 +221,7 @@ export default function CodeAreaModal({
               fontSize={14}
               showGutter
               enableLiveAutocompletion
-              theme={dark ? "twilight" : "github"}
+              theme={dark ? "monokai" : "github"}
               name="CodeEditor"
               onChange={(value) => {
                 setCode(value);
diff --git a/src/frontend/src/style/custom-ace-overrides.css b/src/frontend/src/style/custom-ace-overrides.css
new file mode 100644
index 0000000000..e1686c9cdc
--- /dev/null
+++ b/src/frontend/src/style/custom-ace-overrides.css
@@ -0,0 +1,63 @@
+/* Custom override for Ace Editor GitHub Dark theme background */
+.ace-github-dark,
+.ace-github-dark .ace_scroller {
+  background-color: #111 !important;
+}
+
+/* Custom override for Ace Editor Monokai theme background - only in dark mode */
+.dark .ace-monokai,
+.dark .ace-monokai .ace_scroller {
+  background-color: #141417 !important;
+}
+
+/* Monokai gutter (sidebar/line numbers) */
+.ace-monokai .ace_gutter,
+.ace-monokai .ace_gutter-active-line {
+  background: #181818 !important;
+  color: #555 !important;
+}
+
+/* Strongest override for Monokai selected line highlight */
+.ace-monokai .ace_marker-layer .ace_active-line,
+.ace-monokai .ace_active-line,
+.ace-monokai .ace_gutter-active-line,
+.ace-monokai .ace_marker-layer .ace_selected-word {
+  background-color: #181818 !important;
+  background: #181818 !important;
+  box-shadow: none !important;
+  border: 0px !important;
+}
+
+.dark .ace-monokai .ace_gutter,
+.dark .ace-monokai .ace_gutter-active-line {
+  background: #1a1a1e !important;
+  color: #555 !important;
+}
+
+.dark .ace-monokai .ace_marker-layer .ace_active-line,
+.dark .ace-monokai .ace_active-line,
+.dark .ace-monokai .ace_gutter-active-line,
+.dark .ace-monokai .ace_marker-layer .ace_selected-word {
+  background-color: #181818 !important;
+  background: #181818 !important;
+  box-shadow: none !important;
+  border: 1px !important;
+}
+
+.dark .ace-monokai .ace_content,
+.ace-github .dark .ace-monokai .ace_gutter,
+.ace-github .dark .ace-monokai,
+.ace-github {
+  border: 1px solid rgba(255, 255, 255, 0.18) !important;
+  box-shadow: none !important;
+}
+
+.ace-github,
+.ace-github .ace_scroller {
+  background-color: #fafbfc !important;
+}
+
+.ace-github {
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  box-shadow: none !important;
+}