diff --git a/integration/__tests__/cluster-pages.tests.ts b/integration/__tests__/cluster-pages.tests.ts
index e835330a95..e7b564d888 100644
--- a/integration/__tests__/cluster-pages.tests.ts
+++ b/integration/__tests__/cluster-pages.tests.ts
@@ -432,7 +432,7 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
     }
 
     const testPodName = "nginx-create-pod-test";
-    const monacoEditor = await frame.waitForSelector(".DockTabContent .MonacoEditor");
+    const monacoEditor = await frame.waitForSelector(`.Dock.isOpen [data-test-component="monaco-editor"]`);
 
     await monacoEditor.click();
     await monacoEditor.type("apiVersion: v1", { delay: 10 });
diff --git a/src/renderer/components/+add-cluster/add-cluster.scss b/src/renderer/components/+add-cluster/add-cluster.scss
index faac757c40..e28065205d 100644
--- a/src/renderer/components/+add-cluster/add-cluster.scss
+++ b/src/renderer/components/+add-cluster/add-cluster.scss
@@ -23,7 +23,7 @@
   --flex-gap: #{$unit * 2};
   $spacing: $padding * 2;
 
-  .MonacoEditor {
+  [data-test-component="monaco-editor"] {
     min-height: 600px;
     max-height: 600px;
     border: 1px solid var(--colorVague);
diff --git a/src/renderer/components/+apps-releases/release-details.scss b/src/renderer/components/+apps-releases/release-details.scss
index 759bd5cec4..acdb756e64 100644
--- a/src/renderer/components/+apps-releases/release-details.scss
+++ b/src/renderer/components/+apps-releases/release-details.scss
@@ -87,12 +87,12 @@
   }
 
   .values {
-    .MonacoEditor {
+    [data-test-component="monaco-editor"] {
       min-height: 300px;
-    }
 
-    .MonacoEditor + .Button {
-      align-self: flex-start;
+      + .Button {
+        align-self: flex-start;
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+custom-resources/crd-details.scss b/src/renderer/components/+custom-resources/crd-details.scss
index b2f94c2650..eb11df3d76 100644
--- a/src/renderer/components/+custom-resources/crd-details.scss
+++ b/src/renderer/components/+custom-resources/crd-details.scss
@@ -45,7 +45,7 @@
     }
   }
 
-  .MonacoEditor {
+  [data-test-component="monaco-editor"] {
     height: 400px;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+user-management/+cluster-roles/add-dialog.scss b/src/renderer/components/+user-management/+cluster-roles/add-dialog.scss
index 383690c28f..2136054cd8 100644
--- a/src/renderer/components/+user-management/+cluster-roles/add-dialog.scss
+++ b/src/renderer/components/+user-management/+cluster-roles/add-dialog.scss
@@ -20,7 +20,4 @@
  */
 
 .AddRoleDialog {
-  .MonacoEditor {
-    min-height: 200px;
-  }
 }
diff --git a/src/renderer/components/+user-management/+roles/add-dialog.scss b/src/renderer/components/+user-management/+roles/add-dialog.scss
index 8a185ef137..eeb1159124 100644
--- a/src/renderer/components/+user-management/+roles/add-dialog.scss
+++ b/src/renderer/components/+user-management/+roles/add-dialog.scss
@@ -1,5 +1,2 @@
 .AddRoleDialog {
-  .MonacoEditor {
-    min-height: 200px;
-  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/dock/dock-tab-content.scss b/src/renderer/components/dock/dock-tab-content.module.css
similarity index 96%
rename from src/renderer/components/dock/dock-tab-content.scss
rename to src/renderer/components/dock/dock-tab-content.module.css
index 8c2cf3e0df..e74d3bce76 100644
--- a/src/renderer/components/dock/dock-tab-content.scss
+++ b/src/renderer/components/dock/dock-tab-content.module.css
@@ -23,4 +23,6 @@
   position: relative;
   flex: 1;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
diff --git a/src/renderer/components/dock/dock-tab-content.tsx b/src/renderer/components/dock/dock-tab-content.tsx
index 9aaebbdb15..31d348893f 100644
--- a/src/renderer/components/dock/dock-tab-content.tsx
+++ b/src/renderer/components/dock/dock-tab-content.tsx
@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./dock-tab-content.scss";
+import styles from "./dock-tab-content.module.css";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
@@ -114,7 +114,11 @@ export class DockTabContent extends React.Component<DockTabContentProps> {
     const { InfoPanel, Content } = this.tabComponents;
 
     return (
-      <div className={cssNames("DockTabContent flex column", className)} ref={bindContainerRef}>
+      <div
+        data-test-component="dock-tab-content"
+        className={cssNames(styles.DockTabContent, className)}
+        ref={bindContainerRef}
+      >
         {InfoPanel && <InfoPanel tabId={this.tabId} error={this.error}/>}
         {Content && <Content {...this.props}/>}
         {this.renderEditor()}
diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss
index 110df20d91..b20f335508 100644
--- a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss
+++ b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss
@@ -21,7 +21,7 @@
 
 .KubeConfigDialog {
   .theme-light & {
-    .MonacoEditor {
+    [data-test-component="monaco-editor"] {
       border: 1px solid gainsboro;
       border-radius: $radius;
     }
diff --git a/src/renderer/components/monaco-editor/monaco-editor.scss b/src/renderer/components/monaco-editor/monaco-editor.module.css
similarity index 100%
rename from src/renderer/components/monaco-editor/monaco-editor.scss
rename to src/renderer/components/monaco-editor/monaco-editor.module.css
diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx
index c5a46e91da..f79cf84f42 100644
--- a/src/renderer/components/monaco-editor/monaco-editor.tsx
+++ b/src/renderer/components/monaco-editor/monaco-editor.tsx
@@ -19,12 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./monaco-editor.scss";
+import styles from "./monaco-editor.module.css";
 import React from "react";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { editor, Uri } from "monaco-editor";
-import { registerCustomThemes } from "./monaco-themes";
+import { MonacoTheme, registerCustomThemes } from "./monaco-themes";
 import { MonacoValidator, monacoValidators } from "./monaco-validators";
 import { cssNames, disposer, toJS } from "../../utils";
 import { UserStore } from "../../../common/user-store";
@@ -39,7 +39,7 @@ export interface MonacoEditorProps {
   className?: string;
   autoFocus?: boolean;
   readOnly?: boolean;
-  theme?: "vs" /* default, light theme */ | "vs-dark" | "hc-black" | string;
+  theme?: MonacoTheme;
   language?: "yaml" | "json"; // configure bundled list of languages in via MonacoWebpackPlugin({languages: []})
   options?: Partial<editor.IStandaloneEditorConstructionOptions>; // customize editor's initialization options
   onChange?(value: string, evt: editor.IModelContentChangedEvent): void; // catch latest value updates
@@ -50,7 +50,7 @@ export interface MonacoEditorProps {
 
 export const defaultEditorProps: Partial<MonacoEditorProps> = {
   language: "yaml",
-  get theme(): MonacoEditorProps["theme"] {
+  get theme(): MonacoTheme {
     // theme for monaco-editor defined in `src/renderer/themes/lens-*.json`
     return ThemeStore.getInstance().activeTheme.monacoTheme;
   }
@@ -279,7 +279,8 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
 
     return (
       <div
-        className={cssNames("MonacoEditor", className)}
+        data-test-component="monaco-editor"
+        className={cssNames(styles.MonacoEditor, className)}
         ref={this.bindRef}
       />
     );
diff --git a/src/renderer/components/monaco-editor/monaco-themes.ts b/src/renderer/components/monaco-editor/monaco-themes.ts
index 88d3795010..75cabb734f 100644
--- a/src/renderer/components/monaco-editor/monaco-themes.ts
+++ b/src/renderer/components/monaco-editor/monaco-themes.ts
@@ -23,13 +23,16 @@
 import { editor } from "monaco-editor";
 import cloudsMidnight from "./monaco-theme.clouds-midnight.json";
 
-export interface MonacoCustomTheme extends editor.IStandaloneThemeData {
+export type MonacoTheme = "vs" | "vs-dark" | "hc-black" | MonacoCustomTheme;
+export type MonacoCustomTheme = "clouds-midnight";
+
+export interface MonacoThemeData extends editor.IStandaloneThemeData {
   name?: string;
 }
 
 // Registered names could be then used in "themes/*.json" in "{monacoTheme: [name]}"
-export const customThemes = {
-  [cloudsMidnight.name]: cloudsMidnight as MonacoCustomTheme,
+export const customThemes: Partial<Record<MonacoTheme, MonacoThemeData>> = {
+  "clouds-midnight": cloudsMidnight as MonacoThemeData,
 };
 
 export function registerCustomThemes(): void {
@@ -38,6 +41,6 @@ export function registerCustomThemes(): void {
   });
 }
 
-export async function loadCustomTheme(name: string): Promise<MonacoCustomTheme> {
+export async function loadCustomTheme(name: string): Promise<MonacoThemeData> {
   return import(`./monaco-theme.${name}.json`);
 }