diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index 2009efd6256..794748deca3 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -301,12 +301,12 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
               </div>
               {activeView === 'source' ? (
                 <>
-                  <div className="rounded-md border overflow-hidden">
+                  <div className="overflow-hidden rounded-md border dark:border-control overflow-hidden [&_.monaco-editor]:outline-0 [&_.monaco-editor-background]:!bg-surface-200/30 [&_.monaco-editor_.margin]:!bg-surface-200/30 dark:[&_.monaco-editor-background]:!bg-surface-300 dark:[&_.monaco-editor_.margin]:!bg-surface-300">
                     <CodeEditor
                       id="code-id"
                       language="html"
                       isReadOnly={!canUpdateConfig}
-                      className="!mb-0 relative h-96"
+                      className="!mb-0 relative h-96 outline-none outline-offset-0 outline-width-0 outline-0"
                       onInputChange={(e: string | undefined) => {
                         setBodyValue(e ?? '')
                         if (bodyValue !== e) setHasUnsavedChanges(true)
@@ -341,7 +341,7 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
               ) : (
                 <>
                   <iframe
-                    className="!mb-0 mt-0 overflow-hidden h-96 w-full rounded-md border"
+                    className="!mb-0 mt-0 overflow-hidden h-96 w-full rounded-md border bg-white"
                     title={id}
                     srcDoc={bodyValue}
                     sandbox="allow-scripts allow-forms"