diff --git a/Frontend/Frontend.csproj b/Frontend/Frontend.csproj
index f15c136..f42ff40 100644
--- a/Frontend/Frontend.csproj
+++ b/Frontend/Frontend.csproj
@@ -8,6 +8,7 @@
 
     <ItemGroup>
       <PackageReference Include="AntDesign" Version="0.15.5" />
+      <PackageReference Include="BlazorMonaco" Version="3.1.0" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/Frontend/Pages/Editor.razor b/Frontend/Pages/Editor.razor
new file mode 100644
index 0000000..18d233f
--- /dev/null
+++ b/Frontend/Pages/Editor.razor
@@ -0,0 +1,19 @@
+@page "/editor"
+
+<Layout>
+    <Content>
+        <div class="editor-zone">
+            <StandaloneCodeEditor ConstructionOptions="GetEditorConstructionOptions" Id="my-editor-instance"/>
+        </div>
+    </Content>
+</Layout>
+
+@code {
+    private StandaloneEditorConstructionOptions GetEditorConstructionOptions(StandaloneCodeEditor editor)
+    {
+        return new StandaloneEditorConstructionOptions
+        {
+            Language = "yaml"
+        };
+    }
+}
\ No newline at end of file
diff --git a/Frontend/Pages/Editor.razor.css b/Frontend/Pages/Editor.razor.css
new file mode 100644
index 0000000..9c7bb11
--- /dev/null
+++ b/Frontend/Pages/Editor.razor.css
@@ -0,0 +1,3 @@
+.editor-zone {
+    min-height: calc(100vh - 64px);
+}
\ No newline at end of file
diff --git a/Frontend/Pages/_Host.cshtml b/Frontend/Pages/_Host.cshtml
index a20c4bf..9130ff0 100644
--- a/Frontend/Pages/_Host.cshtml
+++ b/Frontend/Pages/_Host.cshtml
@@ -27,7 +27,10 @@
     <a class="dismiss">🗙</a>
 </div>
 
-<script src="_framework/blazor.server.js"></script>
 <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
+<script src="_content/BlazorMonaco/jsInterop.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
+<script src="_framework/blazor.server.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Frontend/_Imports.razor b/Frontend/_Imports.razor
index ce2123f..628d9c2 100644
--- a/Frontend/_Imports.razor
+++ b/Frontend/_Imports.razor
@@ -2,5 +2,8 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.JSInterop
 @using AntDesign
+@using BlazorMonaco
+@using BlazorMonaco.Editor
+@using BlazorMonaco.Languages
 @using Frontend
 @using Frontend.Shared
\ No newline at end of file
diff --git a/Frontend/wwwroot/css/site.css b/Frontend/wwwroot/css/site.css
index 742c9c9..53dbdcb 100644
--- a/Frontend/wwwroot/css/site.css
+++ b/Frontend/wwwroot/css/site.css
@@ -30,3 +30,7 @@
 body {
     overflow: hidden;
 }
+
+.monaco-editor-container {
+    min-height: 100%;
+}