diff --git a/frontend/app/api/batchedupload/[schema]/[[...slugs]]/route.ts b/frontend/app/api/batchedupload/[schema]/[[...slugs]]/route.ts
index 2c27397e..efd5c1e5 100644
--- a/frontend/app/api/batchedupload/[schema]/[[...slugs]]/route.ts
+++ b/frontend/app/api/batchedupload/[schema]/[[...slugs]]/route.ts
@@ -4,10 +4,7 @@ import { FailedMeasurementsRDS } from '@/config/sqlrdsdefinitions/core';
 import connectionmanager from '@/config/connectionmanager';
 import { format } from 'mysql2/promise';
 
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ schema: string; slugs?: string[] }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ schema: string; slugs?: string[] }> }) {
   const params = await props.params;
   let errorRows: FailedMeasurementsRDS[] = await request.json();
   const schema = params.schema;
diff --git a/frontend/app/api/bulkcrud/route.ts b/frontend/app/api/bulkcrud/route.ts
index 573f14ad..63d6280c 100644
--- a/frontend/app/api/bulkcrud/route.ts
+++ b/frontend/app/api/bulkcrud/route.ts
@@ -7,7 +7,7 @@ import ConnectionManager from '@/config/connectionmanager';
 import { Plot } from '@/config/sqlrdsdefinitions/zones';
 import { OrgCensus } from '@/config/sqlrdsdefinitions/timekeeping';
 
-export async function POST(request: NextRequest, { params }: { params: { dataType: string; slugs?: string[] } }) {
+export async function POST(request: NextRequest) {
   const body = await request.json();
   const dataType: string = body.gridType;
   const schema: string = body.schema;
diff --git a/frontend/app/api/catalog/[firstName]/[lastName]/route.ts b/frontend/app/api/catalog/[firstName]/[lastName]/route.ts
index 017ad301..c1c362af 100644
--- a/frontend/app/api/catalog/[firstName]/[lastName]/route.ts
+++ b/frontend/app/api/catalog/[firstName]/[lastName]/route.ts
@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { HTTPResponses } from '@/config/macros';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ firstName: string; lastName: string }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ firstName: string; lastName: string }> }) {
   const params = await props.params;
   const { firstName, lastName } = params;
   if (!firstName || !lastName) throw new Error('no first or last name provided!');
diff --git a/frontend/app/api/changelog/overview/[changelogType]/[[...options]]/route.ts b/frontend/app/api/changelog/overview/[changelogType]/[[...options]]/route.ts
index d74965c2..a327d990 100644
--- a/frontend/app/api/changelog/overview/[changelogType]/[[...options]]/route.ts
+++ b/frontend/app/api/changelog/overview/[changelogType]/[[...options]]/route.ts
@@ -3,10 +3,7 @@ import { HTTPResponses } from '@/config/macros';
 import MapperFactory from '@/config/datamapper';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function GET(
-  request: NextRequest,
-  props: { params: Promise<{ changelogType: string; options?: string[] }> }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ changelogType: string; options?: string[] }> }) {
   const params = await props.params;
   const schema = request.nextUrl.searchParams.get('schema');
   if (!schema) throw new Error('schema not found');
diff --git a/frontend/app/api/cmprevalidation/[dataType]/[[...slugs]]/route.ts b/frontend/app/api/cmprevalidation/[dataType]/[[...slugs]]/route.ts
index a610ce41..641dd8d4 100644
--- a/frontend/app/api/cmprevalidation/[dataType]/[[...slugs]]/route.ts
+++ b/frontend/app/api/cmprevalidation/[dataType]/[[...slugs]]/route.ts
@@ -4,10 +4,7 @@ import ConnectionManager from '@/config/connectionmanager';
 
 // datatype: table name
 // expecting 1) schema 2) plotID 3) plotCensusNumber
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs || !params.dataType) throw new Error('missing slugs');
   const [schema, plotID, plotCensusNumber] = params.slugs;
diff --git a/frontend/app/api/fixeddata/[dataType]/[[...slugs]]/route.ts b/frontend/app/api/fixeddata/[dataType]/[[...slugs]]/route.ts
index ded828bf..490ba39b 100644
--- a/frontend/app/api/fixeddata/[dataType]/[[...slugs]]/route.ts
+++ b/frontend/app/api/fixeddata/[dataType]/[[...slugs]]/route.ts
@@ -136,10 +136,7 @@ export async function GET(
 }
 
 // required dynamic parameters: dataType (fixed),[ schema, gridID value] -> slugs
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID, _plotIDParam, censusIDParam] = params.slugs;
@@ -204,10 +201,7 @@ export async function POST(
 }
 
 // slugs: schema, gridID
-export async function PATCH(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function PATCH(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;
@@ -345,10 +339,7 @@ export async function PATCH(
 
 // slugs: schema, gridID
 // body: full data row, only need first item from it this time though
-export async function DELETE(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function DELETE(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;
diff --git a/frontend/app/api/fixeddatafilter/[dataType]/[[...slugs]]/route.ts b/frontend/app/api/fixeddatafilter/[dataType]/[[...slugs]]/route.ts
index b92ffb7f..a5a94c71 100644
--- a/frontend/app/api/fixeddatafilter/[dataType]/[[...slugs]]/route.ts
+++ b/frontend/app/api/fixeddatafilter/[dataType]/[[...slugs]]/route.ts
@@ -373,10 +373,7 @@ export async function POST(
 }
 
 // slugs: schema, gridID
-export async function PATCH(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function PATCH(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;
@@ -437,10 +434,7 @@ export async function PATCH(
 
 // slugs: schema, gridID
 // body: full data row, only need first item from it this time though
-export async function DELETE(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function DELETE(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, gridID] = params.slugs;
diff --git a/frontend/app/api/formdownload/[dataType]/[[...slugs]]/route.ts b/frontend/app/api/formdownload/[dataType]/[[...slugs]]/route.ts
index e0abfaa0..61552f3b 100644
--- a/frontend/app/api/formdownload/[dataType]/[[...slugs]]/route.ts
+++ b/frontend/app/api/formdownload/[dataType]/[[...slugs]]/route.ts
@@ -34,10 +34,7 @@ const buildSearchStub = (columns: string[], quickFilter: string[], alias?: strin
     .join(' OR ');
 };
 
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   const { dataType, slugs } = params;
   if (!dataType || !slugs) throw new Error('data type or slugs not provided');
diff --git a/frontend/app/api/formvalidation/[dataType]/[[...slugs]]/route.ts b/frontend/app/api/formvalidation/[dataType]/[[...slugs]]/route.ts
index 154997ac..c8b56399 100644
--- a/frontend/app/api/formvalidation/[dataType]/[[...slugs]]/route.ts
+++ b/frontend/app/api/formvalidation/[dataType]/[[...slugs]]/route.ts
@@ -7,10 +7,7 @@ import ConnectionManager from '@/config/connectionmanager';
 // slugs: schema, columnName, value ONLY
 // needs to match dynamic format established by other slug routes!
 // refit to match entire rows, using dataType convention to determine what columns need testing?
-export async function GET(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   // simple dynamic validation to confirm table input values:
   if (!params.slugs || params.slugs.length !== 3) throw new Error('slugs missing -- formvalidation');
diff --git a/frontend/app/api/postvalidationbyquery/[schema]/[plotID]/[censusID]/[queryID]/route.ts b/frontend/app/api/postvalidationbyquery/[schema]/[plotID]/[censusID]/[queryID]/route.ts
index 14c2362c..cc42ee50 100644
--- a/frontend/app/api/postvalidationbyquery/[schema]/[plotID]/[censusID]/[queryID]/route.ts
+++ b/frontend/app/api/postvalidationbyquery/[schema]/[plotID]/[censusID]/[queryID]/route.ts
@@ -3,10 +3,7 @@ import { HTTPResponses } from '@/config/macros';
 import moment from 'moment';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function GET(
-  _request: NextRequest,
-  props: { params: Promise<{ schema: string; plotID: string; censusID: string; queryID: string }> }
-) {
+export async function GET(_request: NextRequest, props: { params: Promise<{ schema: string; plotID: string; censusID: string; queryID: string }> }) {
   const params = await props.params;
   const { schema } = params;
   const plotID = parseInt(params.plotID);
diff --git a/frontend/app/api/refreshviews/[view]/[schema]/route.ts b/frontend/app/api/refreshviews/[view]/[schema]/route.ts
index c308be00..6c0ce992 100644
--- a/frontend/app/api/refreshviews/[view]/[schema]/route.ts
+++ b/frontend/app/api/refreshviews/[view]/[schema]/route.ts
@@ -2,10 +2,7 @@ import { HTTPResponses } from '@/config/macros';
 import { NextRequest, NextResponse } from 'next/server';
 import ConnectionManager from '@/config/connectionmanager';
 
-export async function POST(
-  _request: NextRequest,
-  props: { params: Promise<{ view: string; schema: string }> }
-) {
+export async function POST(_request: NextRequest, props: { params: Promise<{ view: string; schema: string }> }) {
   const params = await props.params;
   if (!params.schema || params.schema === 'undefined' || !params.view || params.view === 'undefined' || !params) throw new Error('schema not provided');
   const { view, schema } = params;
diff --git a/frontend/app/api/rollover/[dataType]/[[...slugs]]/route.ts b/frontend/app/api/rollover/[dataType]/[[...slugs]]/route.ts
index e5c7ef36..60eda8a8 100644
--- a/frontend/app/api/rollover/[dataType]/[[...slugs]]/route.ts
+++ b/frontend/app/api/rollover/[dataType]/[[...slugs]]/route.ts
@@ -9,10 +9,7 @@ import ConnectionManager from '@/config/connectionmanager';
  * @param params - The route parameters, including the `dataType` (either 'quadrats' or 'personnel') and the `slugs` (an array containing the schema, plotID, sourceCensusID, and newCensusID).
  * @returns A NextResponse with a success message or an error message, along with the appropriate HTTP status code.
  */
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ dataType: string; slugs?: string[] }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ dataType: string; slugs?: string[] }> }) {
   const params = await props.params;
   if (!params.slugs) throw new Error('slugs not provided');
   const [schema, plotID, sourceCensusID, newCensusID] = params.slugs;
diff --git a/frontend/app/api/specieslimits/[plotID]/[plotCensusNumber]/route.ts b/frontend/app/api/specieslimits/[plotID]/[plotCensusNumber]/route.ts
index 385a15e2..da807868 100644
--- a/frontend/app/api/specieslimits/[plotID]/[plotCensusNumber]/route.ts
+++ b/frontend/app/api/specieslimits/[plotID]/[plotCensusNumber]/route.ts
@@ -4,10 +4,7 @@ import { HTTPResponses } from '@/config/macros';
 import ConnectionManager from '@/config/connectionmanager';
 
 // pulls everything
-export async function GET(
-  request: NextRequest,
-  props: { params: Promise<{ plotID: string; plotCensusNumber: string }> }
-) {
+export async function GET(request: NextRequest, props: { params: Promise<{ plotID: string; plotCensusNumber: string }> }) {
   const params = await props.params;
   const schema = request.nextUrl.searchParams.get('schema');
   if (!schema) throw new Error('Schema not provided');
diff --git a/frontend/app/api/validations/procedures/[validationType]/route.ts b/frontend/app/api/validations/procedures/[validationType]/route.ts
index f7416ba9..a253e1aa 100644
--- a/frontend/app/api/validations/procedures/[validationType]/route.ts
+++ b/frontend/app/api/validations/procedures/[validationType]/route.ts
@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { runValidation } from '@/components/processors/processorhelperfunctions';
 import { HTTPResponses } from '@/config/macros';
 
-export async function POST(
-  request: NextRequest,
-  props: { params: Promise<{ validationType: string }> }
-) {
+export async function POST(request: NextRequest, props: { params: Promise<{ validationType: string }> }) {
   const params = await props.params;
   try {
     if (!params.validationType) throw new Error('validationProcedureName not provided');
diff --git a/frontend/app/contexts/listselectionprovider.tsx b/frontend/app/contexts/listselectionprovider.tsx
index ac7870a2..753e20fc 100644
--- a/frontend/app/contexts/listselectionprovider.tsx
+++ b/frontend/app/contexts/listselectionprovider.tsx
@@ -1,6 +1,6 @@
 // ListSelectionProvider.tsx
 'use client';
-import React, { createContext, Dispatch, useContext, useReducer } from 'react';
+import React, { createContext, Dispatch, Reducer, useContext, useReducer } from 'react';
 import { createEnhancedDispatch, EnhancedDispatch, genericLoadReducer, LoadAction } from '@/config/macros/contextreducers';
 import { PlotRDS, QuadratRDS, SitesRDS } from '@/config/sqlrdsdefinitions/zones';
 import { OrgCensus } from '@/config/sqlrdsdefinitions/timekeeping';
@@ -19,13 +19,18 @@ export const SiteListDispatchContext = createContext<EnhancedDispatch<SitesRDS[]
 export const FirstLoadDispatchContext = createContext<Dispatch<{ firstLoad: boolean }> | undefined>(undefined);
 
 export function ListSelectionProvider({ children }: Readonly<{ children: React.ReactNode }>) {
-  const [plotList, plotListDispatch] = useReducer<React.Reducer<PlotRDS[] | undefined, LoadAction<PlotRDS[]>>>(genericLoadReducer, []);
+  const plotListReducer: Reducer<PlotRDS[] | undefined, LoadAction<PlotRDS[]>> = genericLoadReducer<PlotRDS[]>;
+  const orgCensusListReducer: Reducer<OrgCensus[] | undefined, LoadAction<OrgCensus[]>> = genericLoadReducer<OrgCensus[]>;
+  const quadratListReducer: Reducer<QuadratRDS[] | undefined, LoadAction<QuadratRDS[]>> = genericLoadReducer<QuadratRDS[]>;
+  const siteListReducer: Reducer<SitesRDS[] | undefined, LoadAction<SitesRDS[]>> = genericLoadReducer<SitesRDS[]>;
 
-  const [orgCensusList, orgCensusListDispatch] = useReducer<React.Reducer<OrgCensus[] | undefined, LoadAction<OrgCensus[]>>>(genericLoadReducer, []);
+  const [plotList, plotListDispatch] = useReducer(plotListReducer, []);
 
-  const [quadratList, quadratListDispatch] = useReducer<React.Reducer<QuadratRDS[] | undefined, LoadAction<QuadratRDS[]>>>(genericLoadReducer, []);
+  const [orgCensusList, orgCensusListDispatch] = useReducer(orgCensusListReducer, []);
 
-  const [siteList, siteListDispatch] = useReducer<React.Reducer<SitesRDS[] | undefined, LoadAction<SitesRDS[]>>>(genericLoadReducer, []);
+  const [quadratList, quadratListDispatch] = useReducer(quadratListReducer, []);
+
+  const [siteList, siteListDispatch] = useReducer(siteListReducer, []);
 
   const [firstLoad, firstLoadDispatch] = useReducer(firstLoadReducer, true);
 
diff --git a/frontend/components/client/codeeditor.tsx b/frontend/components/client/codeeditor.tsx
new file mode 100644
index 00000000..3e99801e
--- /dev/null
+++ b/frontend/components/client/codeeditor.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import React, { Dispatch, SetStateAction, useRef } from 'react';
+import { Box } from '@mui/joy';
+import { useCodeMirror } from '@uiw/react-codemirror';
+import { basicSetup } from 'codemirror';
+import { sql } from '@codemirror/lang-sql';
+import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
+
+type CodeEditorProps = {
+  value: string;
+  setValue: Dispatch<SetStateAction<string>> | undefined;
+  schemaDetails?: { table_name: string; column_name: string }[];
+  height?: string | number;
+  isDarkMode?: boolean;
+  readOnly?: boolean;
+};
+
+const CodeEditor: React.FC<CodeEditorProps> = ({ value, setValue, schemaDetails = [], height = '60vh', isDarkMode = false, readOnly = false }) => {
+  const editorContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // Autocomplete Suggestions
+  const autocompleteExtension = autocompletion({
+    override: [
+      (context: CompletionContext) => {
+        const word = context.matchBefore(/\w*/);
+        if (!word || word.from === word.to) return null;
+
+        const suggestions = [
+          ...Array.from(new Set(schemaDetails.map(row => row.table_name))).map(table => ({
+            label: table,
+            type: 'keyword',
+            detail: 'Table',
+            apply: table
+          })),
+          ...schemaDetails.map(({ table_name, column_name }) => ({
+            label: `${table_name}.${column_name}`,
+            type: 'property',
+            detail: `Column from ${table_name}`,
+            apply: `${table_name}.${column_name}`
+          }))
+        ];
+
+        return {
+          from: word.from,
+          options: suggestions
+        };
+      }
+    ]
+  });
+
+  // Initialize CodeMirror
+  useCodeMirror({
+    container: editorContainerRef.current,
+    value,
+    height: height.toString(),
+    extensions: [basicSetup, sql(), autocompleteExtension],
+    theme: isDarkMode ? 'dark' : 'light',
+    onChange: setValue,
+    readOnly
+  });
+
+  return <Box ref={editorContainerRef} sx={{ width: '100%', height: '100%' }} />;
+};
+
+export default CodeEditor;
diff --git a/frontend/components/client/custommonacoeditor.tsx b/frontend/components/client/custommonacoeditor.tsx
deleted file mode 100644
index 04b02bc6..00000000
--- a/frontend/components/client/custommonacoeditor.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-'use client';
-
-import * as monaco from 'monaco-editor';
-import React, { Dispatch, memo, SetStateAction, useEffect, useRef, useState } from 'react';
-import { Box, Button, Snackbar } from '@mui/joy';
-
-type CustomMonacoEditorProps = {
-  schemaDetails: {
-    table_name: string;
-    column_name: string;
-  }[];
-  setContent?: Dispatch<SetStateAction<string | undefined>>;
-  content?: string;
-  height?: string | number;
-  isDarkMode?: boolean;
-  options?: monaco.editor.IStandaloneEditorConstructionOptions;
-};
-
-function processExplainOutput(explainRows: any[]): { valid: boolean; message: string } {
-  for (const row of explainRows) {
-    if (row.Extra?.includes('Impossible WHERE')) {
-      return { valid: false, message: 'The WHERE clause is impossible to satisfy.' };
-    }
-
-    if (!row.table) {
-      return { valid: false, message: 'Invalid table reference.' };
-    }
-
-    if (!row.key && row.possible_keys) {
-      return { valid: false, message: `No indexes are being used for table ${row.table}. Consider adding an index.` };
-    }
-  }
-
-  return { valid: true, message: 'The query is valid.' };
-}
-
-function CustomMonacoEditor({ schemaDetails, setContent = () => {}, content = '', height = '60vh', options = {}, isDarkMode }: CustomMonacoEditorProps) {
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-  const editorContainerRef = useRef<HTMLDivElement | null>(null);
-  const [snackbarContent, setSnackbarContent] = useState<{ valid: boolean; message: string } | undefined>();
-  const [openSnackbar, setOpenSnackbar] = useState(false);
-
-  async function validateQuery() {
-    const response = await fetch(`/api/runquery`, { method: 'POST', body: JSON.stringify('EXPLAIN ' + content) });
-    const data = await response.json();
-    const { valid, message } = processExplainOutput(data);
-
-    setSnackbarContent({ valid, message });
-    setOpenSnackbar(true);
-  }
-
-  useEffect(() => {
-    if (editorContainerRef.current) {
-      editorRef.current = monaco.editor.create(editorContainerRef.current, {
-        value: content,
-        language: 'mysql',
-        theme: isDarkMode ? 'vs-dark' : 'light',
-        ...options
-      });
-
-      editorRef.current.onDidChangeModelContent(() => {
-        setContent(editorRef.current?.getValue() ?? '');
-      });
-
-      monaco.languages.registerCompletionItemProvider('mysql', {
-        provideCompletionItems: (model, position) => {
-          const suggestions: monaco.languages.CompletionItem[] = [];
-          const word = model.getWordUntilPosition(position);
-          const range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
-
-          const tables = Array.from(new Set(schemaDetails.map(row => row.table_name)));
-          tables.forEach(table => {
-            suggestions.push({
-              label: table,
-              kind: monaco.languages.CompletionItemKind.Function,
-              insertText: table,
-              detail: 'Table',
-              range
-            });
-          });
-
-          schemaDetails.forEach(({ table_name, column_name }) => {
-            suggestions.push({
-              label: `${table_name}.${column_name}`,
-              kind: monaco.languages.CompletionItemKind.Property,
-              insertText: `${table_name}.${column_name}`,
-              detail: `Column from ${table_name}`,
-              range
-            });
-          });
-
-          return { suggestions };
-        }
-      });
-    }
-
-    return () => {
-      editorRef.current?.dispose();
-    };
-  }, [schemaDetails, isDarkMode]);
-
-  return (
-    <>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-        <Button onClick={validateQuery}>Validate Query</Button>
-        <div ref={editorContainerRef} style={{ height }} />
-      </Box>
-      <Snackbar
-        variant={'soft'}
-        open={openSnackbar}
-        color={snackbarContent?.valid ? 'success' : 'danger'}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        autoHideDuration={1000}
-        endDecorator={
-          <Button onClick={() => setOpenSnackbar(false)} size="sm" variant="soft">
-            Dismiss
-          </Button>
-        }
-        onClose={() => {
-          setSnackbarContent(undefined);
-        }}
-      >
-        Query validation results: {snackbarContent?.valid ? 'Valid' : 'Invalid'} <br />
-        Details: {snackbarContent?.message}
-      </Snackbar>
-    </>
-  );
-}
-
-export default memo(CustomMonacoEditor);
diff --git a/frontend/components/client/postvalidationrow.tsx b/frontend/components/client/postvalidationrow.tsx
index 7a32c22d..003615e1 100644
--- a/frontend/components/client/postvalidationrow.tsx
+++ b/frontend/components/client/postvalidationrow.tsx
@@ -9,6 +9,7 @@ import { Done } from '@mui/icons-material';
 import moment from 'moment/moment';
 import { darken } from '@mui/system';
 import dynamic from 'next/dynamic';
+import CodeEditor from '@/components/client/codeeditor';
 
 interface PostValidationRowProps {
   postValidation: PostValidationQueriesRDS;
@@ -36,7 +37,7 @@ const PostValidationRow: React.FC<PostValidationRowProps> = ({
   schemaDetails
 }) => {
   const formattedResults = JSON.stringify(JSON.parse(postValidation.lastRunResult ?? '{}'), null, 2);
-  const CustomMonacoEditor = dynamic(() => import('@/components/client/custommonacoeditor'), { ssr: false });
+  const CustomMonacoEditor = dynamic(() => import('@/components/client/codeeditor'), { ssr: false });
 
   const successColor = !isDarkMode ? 'rgba(54, 163, 46, 0.3)' : darken('rgba(54,163,46,0.6)', 0.7);
   const failureColor = !isDarkMode ? 'rgba(255, 0, 0, 0.3)' : darken('rgba(255,0,0,0.6)', 0.7);
@@ -120,21 +121,15 @@ const PostValidationRow: React.FC<PostValidationRowProps> = ({
             }}
           >
             {expandedQuery === postValidation.queryID ? (
-              <CustomMonacoEditor
+              <CodeEditor
                 schemaDetails={schemaDetails}
-                content={postValidation.queryDefinition!.replace(/\${(.*?)}/g, (_match: any, p1: string) =>
+                value={postValidation.queryDefinition!.replace(/\${(.*?)}/g, (_match: any, p1: string) =>
                   String(replacements[p1 as keyof typeof replacements] ?? '')
                 )}
-                setContent={undefined}
+                setValue={undefined}
                 height={`${Math.min(300, 20 * (postValidation?.queryDefinition ?? '').split('\n').length)}px`}
                 isDarkMode={isDarkMode}
-                options={{
-                  readOnly: true,
-                  minimap: { enabled: false },
-                  scrollBeyondLastLine: false,
-                  wordWrap: 'off',
-                  lineNumbers: 'off'
-                }}
+                readOnly={true}
               />
             ) : (
               <Textarea
@@ -196,20 +191,13 @@ const PostValidationRow: React.FC<PostValidationRowProps> = ({
               <Typography variant="h6" gutterBottom>
                 Last Run Results
               </Typography>
-              <CustomMonacoEditor
+              <CodeEditor
+                value={formattedResults ?? ''}
+                setValue={undefined}
                 schemaDetails={schemaDetails}
-                content={formattedResults}
-                setContent={undefined}
                 height={formattedResults ? `${Math.min(300, 20 * formattedResults.split('\n').length)}px` : undefined}
                 isDarkMode={isDarkMode}
-                options={{
-                  readOnly: true,
-                  minimap: { enabled: false },
-                  scrollBeyondLastLine: false,
-                  wordWrap: 'on'
-                }}
-                width={'75vw'}
-                defaultLanguage={'json'}
+                readOnly={true}
               />
             </Box>
           </TableCell>
diff --git a/frontend/components/datagrids/datagridcommons.tsx b/frontend/components/datagrids/datagridcommons.tsx
deleted file mode 100644
index d24e2208..00000000
--- a/frontend/components/datagrids/datagridcommons.tsx
+++ /dev/null
@@ -1,805 +0,0 @@
-'use client';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  GridActionsCellItem,
-  GridColDef,
-  GridEventListener,
-  GridFilterModel,
-  GridRowEditStopReasons,
-  GridRowId,
-  GridRowModel,
-  GridRowModes,
-  GridRowModesModel,
-  GridToolbar,
-  GridToolbarContainer,
-  GridToolbarProps,
-  ToolbarPropsOverrides,
-  useGridApiRef
-} from '@mui/x-data-grid';
-import { Alert, Button, Snackbar } from '@mui/material';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/DeleteOutlined';
-import SaveIcon from '@mui/icons-material/Save';
-import CancelIcon from '@mui/icons-material/Close';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import Box from '@mui/joy/Box';
-import { Tooltip, Typography } from '@mui/joy';
-import { StyledDataGrid } from '@/config/styleddatagrid';
-import {
-  CellItemContainer,
-  createDeleteQuery,
-  createFetchQuery,
-  createPostPatchQuery,
-  DataGridCommonProps,
-  EditToolbarCustomProps,
-  filterColumns,
-  getColumnVisibilityModel,
-  getGridID,
-  PendingAction
-} from '@/config/datagridhelpers';
-import { useSession } from 'next-auth/react';
-import { useOrgCensusContext, usePlotContext, useQuadratContext, useSiteContext } from '@/app/contexts/userselectionprovider';
-import { redirect } from 'next/navigation';
-import { HTTPResponses, UnifiedValidityFlags } from '@/config/macros';
-import { useDataValidityContext } from '@/app/contexts/datavalidityprovider';
-import { useLoading } from '@/app/contexts/loadingprovider';
-
-import ReEnterDataModal from './reentrydatamodal';
-import ConfirmationDialog from './confirmationdialog';
-
-type EditToolbarProps = EditToolbarCustomProps & GridToolbarProps & ToolbarPropsOverrides;
-
-const EditToolbar = ({ handleAddNewRow, handleRefresh, handleExportAll, locked, filterModel }: EditToolbarProps) => {
-  const handleExportClick = async () => {
-    if (!handleExportAll) return;
-    const fullData = await handleExportAll();
-    const blob = new Blob([JSON.stringify(fullData, null, 2)], {
-      type: 'application/json'
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'data.json';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  return (
-    <GridToolbarContainer>
-      <GridToolbar />
-      {/*<Button color="primary" startIcon={<AddIcon />} onClick={handleAddNewRow} disabled={locked}>*/}
-      {/*  Add Row*/}
-      {/*</Button>*/}
-      <Button color="primary" startIcon={<RefreshIcon />} onClick={handleRefresh}>
-        Refresh
-      </Button>
-      <Button color="primary" startIcon={<FileDownloadIcon />} onClick={handleExportClick}>
-        Export Full Data
-      </Button>
-    </GridToolbarContainer>
-  );
-};
-
-export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
-  const {
-    addNewRowToGrid,
-    gridColumns,
-    gridType,
-    rows = [],
-    setRows,
-    rowCount,
-    setRowCount,
-    rowModesModel,
-    setRowModesModel,
-    snackbar,
-    setSnackbar,
-    refresh,
-    setRefresh,
-    paginationModel,
-    setPaginationModel,
-    isNewRowAdded,
-    setIsNewRowAdded,
-    setShouldAddRowAfterFetch,
-    handleSelectQuadrat,
-    locked = false,
-    selectionOptions
-  } = props;
-
-  const [newLastPage, setNewLastPage] = useState<number | null>(null);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [pendingAction, setPendingAction] = useState<PendingAction>({
-    actionType: '',
-    actionId: null
-  });
-  const [promiseArguments, setPromiseArguments] = useState<{
-    resolve: (value: GridRowModel) => void;
-    reject: (reason?: any) => void;
-    newRow: GridRowModel;
-    oldRow: GridRowModel;
-  } | null>(null);
-  const [filterModel, setFilterModel] = useState<GridFilterModel>({
-    items: []
-  });
-
-  const currentPlot = usePlotContext();
-  const currentCensus = useOrgCensusContext();
-  const currentQuadrat = useQuadratContext();
-  const currentSite = useSiteContext();
-
-  const { setLoading } = useLoading();
-  const { triggerRefresh } = useDataValidityContext();
-
-  useSession();
-
-  const apiRef = useGridApiRef();
-
-  useEffect(() => {
-    if (!isNewRowAdded) {
-      fetchPaginatedData(paginationModel.page).catch(console.error);
-    }
-  }, [paginationModel.page]);
-
-  useEffect(() => {
-    if (currentPlot?.plotID || currentCensus?.plotCensusNumber) {
-      fetchPaginatedData(paginationModel.page).catch(console.error);
-    }
-  }, [currentPlot, currentCensus, paginationModel.page]);
-
-  useEffect(() => {
-    if (refresh && currentSite) {
-      handleRefresh().then(() => {
-        if (refresh) {
-          setRefresh(false); // Only update state if it hasn't already been reset
-        }
-      });
-    }
-  }, [refresh, currentSite]); // No need for setRefresh in dependencies
-
-  useEffect(() => {
-    const updatedRowModesModel = rows.reduce((acc, row) => {
-      acc[row.id] = rowModesModel[row.id] || { mode: GridRowModes.View };
-      return acc;
-    }, {} as GridRowModesModel);
-
-    // Only update if the rowModesModel has actually changed to avoid infinite re-rendering
-    if (JSON.stringify(updatedRowModesModel) !== JSON.stringify(rowModesModel)) {
-      setRowModesModel(updatedRowModesModel);
-    }
-  }, [rows]); // Removed rowModesModel from the dependencies array
-
-  const fetchFullData = async () => {
-    setLoading(true, 'Fetching full dataset...');
-    let partialQuery = ``;
-    if (currentPlot?.plotID) partialQuery += `/${currentPlot.plotID}`;
-    if (currentCensus?.plotCensusNumber) partialQuery += `/${currentCensus.plotCensusNumber}`;
-    if (currentQuadrat?.quadratID) partialQuery += `/${currentQuadrat.quadratID}`;
-    const fullDataQuery = `/api/fetchall/${gridType}` + partialQuery + `?schema=${currentSite?.schemaName}`;
-
-    try {
-      const response = await fetch(fullDataQuery, {
-        method: 'GET',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(filterModel)
-      });
-      const data = await response.json();
-      if (!response.ok) throw new Error(data.message || 'Error fetching full data');
-      return data.output;
-    } catch (error) {
-      console.error('Error fetching full data:', error);
-      setSnackbar({ children: 'Error fetching full data', severity: 'error' });
-      return [];
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const openConfirmationDialog = (actionType: 'save' | 'delete', actionId: GridRowId) => {
-    setPendingAction({ actionType, actionId });
-
-    const row = rows.find(row => String(row.id) === String(actionId));
-    if (row) {
-      if (actionType === 'delete') {
-        setIsDeleteDialogOpen(true);
-      } else {
-        // Open the reentry modal after setting promiseArguments
-        setIsDialogOpen(true);
-      }
-    }
-  };
-
-  const handleConfirmAction = async (confirmedRow?: GridRowModel) => {
-    setIsDialogOpen(false);
-    setIsDeleteDialogOpen(false);
-
-    if (pendingAction.actionType === 'delete' && pendingAction.actionId !== null) {
-      // Call performDeleteAction if the confirmed action is delete
-      await performDeleteAction(pendingAction.actionId);
-    } else if (promiseArguments) {
-      try {
-        const resolvedRow = confirmedRow || promiseArguments.newRow;
-        // Proceed with saving the row after confirmation
-        await performSaveAction(promiseArguments.newRow.id, resolvedRow);
-        setSnackbar({ children: 'Row successfully updated!', severity: 'success' });
-      } catch (error: any) {
-        setSnackbar({ children: `Error: ${error.message}`, severity: 'error' });
-      }
-    }
-
-    setPendingAction({ actionType: '', actionId: null });
-    setPromiseArguments(null); // Clear promise arguments after handling
-  };
-
-  const handleCancelAction = () => {
-    setIsDialogOpen(false);
-    setIsDeleteDialogOpen(false);
-    if (promiseArguments) {
-      promiseArguments.reject(new Error('Action cancelled by user'));
-    }
-    setPendingAction({ actionType: '', actionId: null });
-    setPromiseArguments(null); // Clear promise arguments after handling
-  };
-
-  const performSaveAction = async (id: GridRowId, confirmedRow: GridRowModel) => {
-    if (locked || !promiseArguments) return;
-
-    setLoading(true, 'Saving changes...');
-
-    try {
-      // Set the row to view mode after confirmation
-      setRowModesModel(prevModel => ({
-        ...prevModel,
-        [id]: { mode: GridRowModes.View }
-      }));
-
-      const updatedRow = await updateRow(
-        gridType,
-        currentSite?.schemaName,
-        confirmedRow, // Use the confirmed row
-        promiseArguments.oldRow, // Pass the old row for comparison
-        setSnackbar,
-        setIsNewRowAdded,
-        setShouldAddRowAfterFetch,
-        fetchPaginatedData,
-        paginationModel
-      );
-
-      promiseArguments.resolve(updatedRow);
-    } catch (error) {
-      promiseArguments.reject(error);
-    }
-
-    const row = rows.find(row => String(row.id) === String(id));
-    if (row?.isNew) {
-      setIsNewRowAdded(false);
-      setShouldAddRowAfterFetch(false);
-    }
-
-    if (handleSelectQuadrat) handleSelectQuadrat(null);
-    triggerRefresh();
-    setLoading(false);
-    await fetchPaginatedData(paginationModel.page);
-  };
-
-  const performDeleteAction = async (id: GridRowId) => {
-    if (locked) return;
-
-    setLoading(true, 'Deleting...');
-
-    const rowToDelete = rows.find(row => String(row.id) === String(id));
-    if (!rowToDelete) return; // Ensure row exists
-
-    const deleteQuery = createDeleteQuery(currentSite?.schemaName ?? '', gridType, getGridID(gridType), rowToDelete.id);
-
-    try {
-      const response = await fetch(deleteQuery, {
-        method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ newRow: rowToDelete })
-      });
-
-      if (!response.ok) {
-        const error = await response.json();
-        if (response.status === HTTPResponses.FOREIGN_KEY_CONFLICT) {
-          setSnackbar({
-            children: `Error: Cannot delete row due to foreign key constraint in table ${error.referencingTable}`,
-            severity: 'error'
-          });
-        } else {
-          setSnackbar({
-            children: `Error: ${error.message || 'Deletion failed'}`,
-            severity: 'error'
-          });
-        }
-      } else {
-        setRows(prevRows => prevRows.filter(row => row.id !== id)); // Update rows by removing the deleted row
-        setSnackbar({
-          children: 'Row successfully deleted',
-          severity: 'success'
-        });
-        triggerRefresh([gridType as keyof UnifiedValidityFlags]);
-        await fetchPaginatedData(paginationModel.page);
-      }
-    } catch (error: any) {
-      setSnackbar({
-        children: `Error: ${error.message || 'Deletion failed'}`,
-        severity: 'error'
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSaveClick = (id: GridRowId) => async () => {
-    if (locked) return;
-
-    const updatedRowModesModel = { ...rowModesModel };
-    if (!updatedRowModesModel[id] || updatedRowModesModel[id].mode === undefined) {
-      updatedRowModesModel[id] = { mode: GridRowModes.View }; // Set default mode if it doesn't exist
-    }
-
-    // Stop edit mode and apply changes locally without committing to the server yet
-    apiRef.current.stopRowEditMode({ id, ignoreModifications: true });
-
-    // Get the original row data (before edits)
-    const oldRow = rows.find(row => String(row.id) === String(id));
-
-    // Use getRowWithUpdatedValues to fetch all updated field values (the field is ignored in row editing mode)
-    const updatedRow = apiRef.current.getRowWithUpdatedValues(id, 'anyField'); // 'anyField' is a dummy value, ignored in row editing
-
-    console.log('Old Row:', oldRow);
-    console.log('Updated Row:', updatedRow);
-
-    if (oldRow && updatedRow) {
-      // Set promise arguments before opening the modal
-      setPromiseArguments({
-        resolve: (value: GridRowModel) => {}, // Define resolve
-        reject: (reason?: any) => {}, // Define reject
-        oldRow, // Pass the old (original) row
-        newRow: updatedRow // Pass the updated (edited) row
-      });
-
-      // Open the confirmation dialog for reentry data
-      openConfirmationDialog('save', id);
-    }
-  };
-
-  const handleDeleteClick = (id: GridRowId) => () => {
-    console.log('handle delete click: ', id);
-    if (locked) return;
-    if (gridType === 'census') {
-      const rowToDelete = rows.find(row => String(row.id) === String(id));
-      if (currentCensus && rowToDelete && rowToDelete.censusID === currentCensus.dateRanges[0].censusID) {
-        alert('Cannot delete the currently selected census.');
-        return;
-      }
-    }
-    openConfirmationDialog('delete', id);
-  };
-
-  const handleAddNewRow = async () => {
-    if (locked) return;
-    if (isNewRowAdded) return; // Debounce double adds
-    const newRowCount = rowCount + 1;
-    const calculatedNewLastPage = Math.ceil(newRowCount / paginationModel.pageSize) - 1;
-    const existingLastPage = Math.ceil(rowCount / paginationModel.pageSize) - 1;
-    const isNewPageNeeded = newRowCount % paginationModel.pageSize === 1;
-
-    setIsNewRowAdded(true);
-    setShouldAddRowAfterFetch(isNewPageNeeded);
-    setNewLastPage(calculatedNewLastPage);
-
-    if (isNewPageNeeded) {
-      setPaginationModel({ ...paginationModel, page: calculatedNewLastPage });
-      addNewRowToGrid();
-    } else {
-      setPaginationModel({ ...paginationModel, page: existingLastPage });
-      addNewRowToGrid();
-    }
-
-    console.log('rowModesModel: ', rowModesModel);
-  };
-
-  const handleRefresh = async () => {
-    await fetchPaginatedData(paginationModel.page);
-  };
-
-  const fetchPaginatedData = async (pageToFetch: number) => {
-    setLoading(true, 'Loading data...');
-    const paginatedQuery = createFetchQuery(
-      currentSite?.schemaName ?? '',
-      gridType,
-      pageToFetch,
-      paginationModel.pageSize,
-      currentPlot?.plotID,
-      currentCensus?.plotCensusNumber,
-      currentQuadrat?.quadratID
-    );
-    try {
-      const response = await fetch(paginatedQuery, { method: 'GET' });
-      const data = await response.json();
-      if (!response.ok) throw new Error(data.message || 'Error fetching data');
-      setRows(data.output);
-      setRowCount(data.totalCount);
-
-      if (isNewRowAdded && pageToFetch === newLastPage) {
-        addNewRowToGrid();
-        setIsNewRowAdded(false);
-      }
-    } catch (error) {
-      console.error('Error fetching data:', error);
-      setSnackbar({ children: 'Error fetching data', severity: 'error' });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const updateRow = async (
-    gridType: string,
-    schemaName: string | undefined,
-    newRow: GridRowModel,
-    oldRow: GridRowModel,
-    setSnackbar: (value: { children: string; severity: 'error' | 'success' }) => void,
-    setIsNewRowAdded: (value: boolean) => void,
-    setShouldAddRowAfterFetch: (value: boolean) => void,
-    fetchPaginatedData: (page: number) => Promise<void>,
-    paginationModel: { page: number }
-  ): Promise<GridRowModel> => {
-    const gridID = getGridID(gridType);
-    const fetchProcessQuery = createPostPatchQuery(schemaName ?? '', gridType, gridID);
-
-    try {
-      const response = await fetch(fetchProcessQuery, {
-        method: oldRow.isNew ? 'POST' : 'PATCH', // Ensure POST for new row, PATCH for existing
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ oldRow: oldRow, newRow: newRow })
-      });
-
-      const responseJSON = await response.json();
-
-      if (!response.ok) {
-        setSnackbar({
-          children: `Error: ${responseJSON.message}`,
-          severity: 'error'
-        });
-        return Promise.reject(responseJSON.row);
-      }
-
-      setSnackbar({
-        children: oldRow.isNew ? 'New row added!' : 'Row updated!',
-        severity: 'success'
-      });
-
-      if (oldRow.isNew) {
-        setIsNewRowAdded(false);
-        setShouldAddRowAfterFetch(false);
-        await fetchPaginatedData(paginationModel.page);
-      }
-
-      return newRow;
-    } catch (error: any) {
-      setSnackbar({ children: `Error: ${error.message}`, severity: 'error' });
-      return Promise.reject(newRow);
-    }
-  };
-
-  const processRowUpdate = useCallback(
-    async (newRow: GridRowModel, oldRow: GridRowModel) => {
-      setLoading(true, 'Processing changes...');
-
-      // Check if it's a new row and interrupt the API call
-      if (newRow.isNew || !newRow.id) {
-        // Set promiseArguments to handle the modal confirmation
-        setPromiseArguments({
-          resolve: async (confirmedRow: GridRowModel) => {
-            try {
-              // Proceed with updating the row after confirmation
-              const updatedRow = await updateRow(
-                gridType,
-                currentSite?.schemaName,
-                confirmedRow,
-                oldRow,
-                setSnackbar,
-                setIsNewRowAdded,
-                setShouldAddRowAfterFetch,
-                fetchPaginatedData,
-                paginationModel
-              );
-              setLoading(false);
-              return updatedRow;
-            } catch (error: any) {
-              setLoading(false);
-              setSnackbar({
-                children: `Error: ${error.message}`,
-                severity: 'error'
-              });
-              return Promise.reject(error);
-            }
-          },
-          reject: reason => {
-            setLoading(false);
-            return Promise.reject(reason);
-          },
-          oldRow,
-          newRow
-        });
-
-        // Open confirmation dialog to let the user reenter data or confirm
-        openConfirmationDialog('save', newRow.id);
-
-        // Interrupt processRowUpdate by throwing a rejection to stop any API call until the modal is confirmed
-        return Promise.reject(new Error('Row update interrupted for new row, awaiting confirmation'));
-      }
-
-      // For existing rows, proceed with the normal update flow
-      try {
-        const updatedRow = await updateRow(
-          gridType,
-          currentSite?.schemaName,
-          newRow,
-          oldRow,
-          setSnackbar,
-          setIsNewRowAdded,
-          setShouldAddRowAfterFetch,
-          fetchPaginatedData,
-          paginationModel
-        );
-        setLoading(false);
-        return updatedRow;
-      } catch (error: any) {
-        setLoading(false);
-        setSnackbar({
-          children: `Error: ${error.message}`,
-          severity: 'error'
-        });
-        return Promise.reject(error);
-      }
-    },
-    [gridType, currentSite?.schemaName, setSnackbar, setIsNewRowAdded, setShouldAddRowAfterFetch, fetchPaginatedData, paginationModel]
-  );
-
-  const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
-    const updatedRowModesModel = { ...rowModesModel }; // Copy the existing row modes model
-
-    Object.keys(newRowModesModel).forEach(id => {
-      if (!updatedRowModesModel[id] || updatedRowModesModel[id].mode === undefined) {
-        updatedRowModesModel[id] = { mode: GridRowModes.View }; // Set default mode if it doesn't exist
-      }
-      updatedRowModesModel[id] = { ...updatedRowModesModel[id], ...newRowModesModel[id] }; // Merge the new modes
-    });
-
-    setRowModesModel(updatedRowModesModel); // Update the state with the merged modes
-  };
-
-  const handleCloseSnackbar = () => setSnackbar(null);
-
-  const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {
-    if (params.reason === GridRowEditStopReasons.rowFocusOut) {
-      event.defaultMuiPrevented = true;
-    }
-  };
-
-  const handleEditClick = (id: GridRowId) => () => {
-    if (locked) return;
-    const row = rows.find(row => String(row.id) === String(id));
-    if (row && handleSelectQuadrat) {
-      handleSelectQuadrat(row.quadratID);
-    }
-    setRowModesModel(prevModel => ({
-      ...prevModel,
-      [id]: { mode: GridRowModes.Edit }
-    }));
-    // Auto-focus on the first editable cell when entering edit mode
-    setTimeout(() => {
-      const firstEditableColumn = filteredColumns.find(col => col.editable);
-      if (firstEditableColumn) {
-        apiRef.current.setCellFocus(id, firstEditableColumn.field);
-      }
-    });
-  };
-
-  const handleCancelClick = (id: GridRowId, event?: React.MouseEvent | React.KeyboardEvent) => {
-    if (locked) return;
-    event?.preventDefault();
-    const row = rows.find(row => String(row.id) === String(id));
-    if (row?.isNew) {
-      setRows(oldRows => oldRows.filter(row => row.id !== id));
-      setIsNewRowAdded(false);
-      if (rowCount % paginationModel.pageSize === 1 && isNewRowAdded) {
-        const newPage = paginationModel.page - 1 >= 0 ? paginationModel.page - 1 : 0;
-        setPaginationModel({ ...paginationModel, page: newPage });
-      }
-    } else {
-      setRowModesModel(prevModel => ({
-        ...prevModel,
-        [id]: { mode: GridRowModes.View, ignoreModifications: true }
-      }));
-    }
-    if (handleSelectQuadrat) handleSelectQuadrat(null);
-  };
-
-  const getEnhancedCellAction = (type: string, icon: any, onClick: any) => (
-    <CellItemContainer>
-      <Tooltip
-        disableInteractive
-        title={
-          type === 'Save'
-            ? `Save your changes`
-            : type === 'Cancel'
-              ? `Cancel your changes`
-              : type === 'Edit'
-                ? `Edit this row`
-                : type === 'Delete'
-                  ? 'Delete this row (cannot be undone!)'
-                  : type === 'Limits'
-                    ? 'View limits for this row'
-                    : undefined
-        }
-        arrow
-        placement="top"
-      >
-        <GridActionsCellItem icon={icon} label={type} onClick={onClick} />
-      </Tooltip>
-    </CellItemContainer>
-  );
-
-  const getGridActionsColumn = useCallback(
-    (): GridColDef => ({
-      field: 'actions',
-      type: 'actions',
-      headerName: 'Actions',
-      flex: 1,
-      cellClassName: 'actions',
-      getActions: ({ id }) => {
-        if (!rowModesModel[id]?.mode) return [];
-        const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
-        if (isInEditMode && !locked) {
-          return [
-            getEnhancedCellAction('Save', <SaveIcon />, handleSaveClick(id)),
-            getEnhancedCellAction('Cancel', <CancelIcon />, (e: any) => handleCancelClick(id, e))
-          ];
-        }
-        return [getEnhancedCellAction('Edit', <EditIcon />, handleEditClick(id)), getEnhancedCellAction('Delete', <DeleteIcon />, handleDeleteClick(id))];
-      }
-    }),
-    [rowModesModel, locked]
-  );
-
-  const columns = useMemo(() => {
-    return [...gridColumns, getGridActionsColumn()];
-  }, [gridColumns, rowModesModel, getGridActionsColumn]);
-
-  const filteredColumns = useMemo(() => {
-    if (gridType !== 'quadratpersonnel') return filterColumns(rows, columns);
-    else return columns;
-  }, [rows, columns]);
-
-  const handleCellDoubleClick: GridEventListener<'cellDoubleClick'> = params => {
-    if (locked) return;
-    console.log('params: ', params);
-    setRowModesModel(prevModel => ({
-      ...prevModel,
-      [params.id]: { mode: GridRowModes.Edit }
-    }));
-  };
-
-  const handleCellKeyDown: GridEventListener<'cellKeyDown'> = (params, event) => {
-    if (event.key === 'Enter' && !locked) {
-      event.defaultMuiPrevented = true;
-      // console.log('params: ', params);
-      // setRowModesModel(prevModel => ({
-      //   ...prevModel,
-      //   [params.id]: { mode: GridRowModes.Edit }
-      // }));
-    }
-    if (event.key === 'Escape') {
-      event.defaultMuiPrevented = true;
-      // console.log('params: ', params);
-      // setRowModesModel(prevModel => ({
-      //   ...prevModel,
-      //   [params.id]: { mode: GridRowModes.View, ignoreModifications: true }
-      // }));
-      // handleCancelClick(params.id, event);
-    }
-  };
-
-  if (!currentSite || !currentPlot || !currentCensus) {
-    redirect('/dashboard');
-  } else {
-    return (
-      <Box
-        sx={{
-          width: '100%',
-          '& .actions': {
-            color: 'text.secondary'
-          },
-          '& .textPrimary': {
-            color: 'text.primary'
-          }
-        }}
-      >
-        <Box sx={{ width: '100%', flexDirection: 'column' }}>
-          <Typography level={'title-lg'}>Note: The Grid is filtered by your selected Plot and Plot ID</Typography>
-          <StyledDataGrid
-            apiRef={apiRef}
-            sx={{ width: '100%' }}
-            rows={rows}
-            columns={filteredColumns}
-            editMode="row"
-            rowModesModel={rowModesModel}
-            disableColumnSelector
-            onRowModesModelChange={handleRowModesModelChange}
-            onRowEditStop={handleRowEditStop}
-            onCellDoubleClick={handleCellDoubleClick}
-            onCellKeyDown={handleCellKeyDown}
-            processRowUpdate={processRowUpdate}
-            onProcessRowUpdateError={error => {
-              console.error('Row update error:', error);
-              setSnackbar({
-                children: 'Error updating row',
-                severity: 'error'
-              });
-            }}
-            loading={refresh}
-            paginationMode="server"
-            onPaginationModelChange={setPaginationModel}
-            paginationModel={paginationModel}
-            rowCount={rowCount}
-            pageSizeOptions={[paginationModel.pageSize]}
-            filterModel={filterModel}
-            onFilterModelChange={newFilterModel => setFilterModel(newFilterModel)}
-            initialState={{
-              columns: {
-                columnVisibilityModel: getColumnVisibilityModel(gridType)
-              }
-            }}
-            slots={{
-              toolbar: EditToolbar
-            }}
-            slotProps={{
-              toolbar: {
-                locked: locked,
-                handleAddNewRow: handleAddNewRow,
-                handleRefresh: handleRefresh,
-                handleExportAll: fetchFullData,
-                filterModel: filterModel
-              }
-            }}
-            autoHeight
-            getRowHeight={() => 'auto'}
-          />
-        </Box>
-        {!!snackbar && (
-          <Snackbar open anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} onClose={handleCloseSnackbar} autoHideDuration={6000}>
-            <Alert {...snackbar} onClose={handleCloseSnackbar} />
-          </Snackbar>
-        )}
-        {isDialogOpen && promiseArguments && (
-          <ReEnterDataModal
-            gridType={gridType}
-            row={promiseArguments.oldRow} // Pass oldRow
-            reEnterData={promiseArguments.newRow} // Pass newRow
-            handleClose={handleCancelAction}
-            handleSave={handleConfirmAction}
-            columns={gridColumns}
-            selectionOptions={selectionOptions}
-            hiddenColumns={getColumnVisibilityModel(gridType)}
-          />
-        )}
-        {isDeleteDialogOpen && (
-          <ConfirmationDialog
-            open={isDeleteDialogOpen}
-            onClose={handleCancelAction}
-            onConfirm={handleConfirmAction}
-            title="Confirm Deletion"
-            content="Are you sure you want to delete this row? This action cannot be undone."
-          />
-        )}
-      </Box>
-    );
-  }
-}
diff --git a/frontend/components/datagrids/filtrationsystem.tsx b/frontend/components/datagrids/filtrationsystem.tsx
index 76360dd8..1340a93d 100644
--- a/frontend/components/datagrids/filtrationsystem.tsx
+++ b/frontend/components/datagrids/filtrationsystem.tsx
@@ -43,7 +43,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
   const rootProps = useGridRootProps();
   const { item, applyValue, focusElementRef = null } = props;
 
-  const filterTimeout = useRef<any>();
+  const filterTimeout = useRef<any>(undefined);
   const [filterValueState, setFilterValueState] = useState<[string, string]>(item.value ?? '');
   const [applying, setIsApplying] = useState(false);
 
diff --git a/frontend/components/datagrids/isolateddatagridcommons.tsx b/frontend/components/datagrids/isolateddatagridcommons.tsx
index 52983e90..06dc1324 100644
--- a/frontend/components/datagrids/isolateddatagridcommons.tsx
+++ b/frontend/components/datagrids/isolateddatagridcommons.tsx
@@ -29,7 +29,6 @@ import {
   GridToolbarFilterButton,
   GridToolbarProps,
   GridToolbarQuickFilter,
-  ToolbarPropsOverrides,
   useGridApiContext,
   useGridApiRef
 } from '@mui/x-data-grid';
@@ -75,9 +74,7 @@ import GridOnIcon from '@mui/icons-material/GridOn';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import Divider from '@mui/joy/Divider';
 
-type EditToolbarProps = EditToolbarCustomProps & GridToolbarProps & ToolbarPropsOverrides;
-
-const EditToolbar = (props: EditToolbarProps) => {
+const EditToolbar = (props: GridToolbarProps & Partial<EditToolbarCustomProps>) => {
   const {
     handleAddNewRow,
     handleRefresh,
@@ -89,9 +86,11 @@ const EditToolbar = (props: EditToolbarProps) => {
     filterModel,
     dynamicButtons = [],
     gridColumns,
-    gridType
+    gridType,
+    className,
+    ...other
   } = props;
-  if (!handleAddNewRow || !handleRefresh || !handleQuickFilterChange || !handleExportAll || !handleToggleHideEmptyColumns) return <></>;
+  if (!handleAddNewRow || !handleRefresh || !handleQuickFilterChange || !handleExportAll || !handleToggleHideEmptyColumns || !handleExportCSV) return <></>;
   const [inputValue, setInputValue] = useState('');
   const [isTyping, setIsTyping] = useState(false);
   const [openExportModal, setOpenExportModal] = useState(false);
@@ -154,7 +153,7 @@ const EditToolbar = (props: EditToolbarProps) => {
   } else formHeaders = getTableHeaders(gridType as FormType).map(header => header.label);
 
   return (
-    <GridToolbarContainer>
+    <GridToolbarContainer className={className} {...other}>
       <Box
         sx={{
           display: 'flex',
@@ -1312,7 +1311,7 @@ export default function IsolatedDataGridCommons(props: Readonly<IsolatedDataGrid
                 dynamicButtons: dynamicButtons,
                 gridColumns: gridColumns,
                 gridType: gridType
-              } as EditToolbarProps
+              } as GridToolbarProps & Partial<EditToolbarCustomProps>
             }}
             getRowHeight={() => 'auto'}
           />
diff --git a/frontend/components/datagrids/measurementscommons.tsx b/frontend/components/datagrids/measurementscommons.tsx
index fffe50c5..0f29066c 100644
--- a/frontend/components/datagrids/measurementscommons.tsx
+++ b/frontend/components/datagrids/measurementscommons.tsx
@@ -1538,7 +1538,7 @@ export default function MeasurementsCommons(props: Readonly<MeasurementsCommonsP
                     ? [{ label: 'Reset Validation Results?', onClick: () => setIsResetValidationModalOpen(true) }]
                     : [])
                 ]
-              }
+              } as EditToolbarProps
             }}
             getRowHeight={() => 'auto'}
             getRowClassName={getRowClassName}
diff --git a/frontend/components/validationrow.tsx b/frontend/components/validationrow.tsx
index c603b23e..abbd437e 100644
--- a/frontend/components/validationrow.tsx
+++ b/frontend/components/validationrow.tsx
@@ -5,9 +5,9 @@ import { Box, TableCell, TableRow } from '@mui/material';
 import { Cancel, Edit, Save } from '@mui/icons-material';
 import { ValidationProceduresRDS } from '@/config/sqlrdsdefinitions/validations';
 import { Chip, IconButton, List, ListItem, Switch, Textarea, Tooltip } from '@mui/joy';
-import dynamic from 'next/dynamic';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CodeEditor from '@/components/client/codeeditor';
 
 function useDebouncedCallback(callback: (...args: any[]) => void, delay: number) {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -43,11 +43,10 @@ const ValidationRow: React.FC<ValidationRowProps> = ({
   const [isEditing, setIsEditing] = useState(false);
   const originalScriptContent = useRef<string>(validation.definition ?? '');
 
-  const CustomMonacoEditor = dynamic(() => import('@/components/client/custommonacoeditor'), { ssr: false });
-
   const handleEditClick = () => {
     originalScriptContent.current = scriptContent ?? '';
     setIsEditing(true);
+    handleExpandClick(validation.validationID!); // Ensure expansion happens
   };
 
   const handleCancelChanges = () => {
@@ -62,13 +61,10 @@ const ValidationRow: React.FC<ValidationRowProps> = ({
   };
 
   const formattedDescription = validation.description?.replace(/(DBH|HOM)([A-Z])/g, '$1 $2').replace(/([a-z])([A-Z])/g, '$1 $2');
+
   return (
     <TableRow sx={{ borderBottom: 'unset' }}>
-      <TableCell
-        sx={{
-          alignSelf: 'left'
-        }}
-      >
+      <TableCell sx={{ alignSelf: 'left' }}>
         <Tooltip title="Toggle Enabled State">
           <Switch
             checked={validation.isEnabled}
@@ -80,155 +76,66 @@ const ValidationRow: React.FC<ValidationRowProps> = ({
           />
         </Tooltip>
       </TableCell>
-      <TableCell
-        sx={{
-          flexGrow: 0,
-          flexShrink: 1,
-          flexBasis: '20%',
-          whiteSpace: 'normal',
-          wordBreak: 'break-word'
-        }}
-      >
+
+      <TableCell sx={{ flexGrow: 0, flexShrink: 1, flexBasis: '20%', whiteSpace: 'normal', wordBreak: 'break-word' }}>
         {validation.procedureName?.split(/(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])/).join(' ')}
       </TableCell>
-      <TableCell
-        sx={{
-          textAlign: 'left',
-          verticalAlign: 'top'
-        }}
-      >
-        <List
-          marker={'disc'}
-          sx={{
-            padding: 0,
-            margin: 0,
-            listStylePosition: 'inside'
-          }}
-        >
+
+      <TableCell sx={{ textAlign: 'left', verticalAlign: 'top' }}>
+        <List marker="disc" sx={{ padding: 0, margin: 0, listStylePosition: 'inside' }}>
           {formattedDescription?.split(';').map((snippet, index) => (
-            <ListItem
-              key={index}
-              sx={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                padding: 0
-              }}
-            >
-              <Chip
-                sx={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.5rem',
-                  paddingLeft: '0.5rem',
-                  whiteSpace: 'normal',
-                  wordBreak: 'break-word'
-                }}
-              >
-                <Box
-                  component="span"
-                  sx={{
-                    display: 'inline-block',
-                    width: '0.5rem',
-                    height: '0.5rem',
-                    borderRadius: '50%',
-                    backgroundColor: 'currentColor',
-                    marginRight: '0.5rem'
-                  }}
-                />
+            <ListItem key={index} sx={{ display: 'flex', alignItems: 'flex-start', padding: 0 }}>
+              <Chip sx={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', paddingLeft: '0.5rem', whiteSpace: 'normal', wordBreak: 'break-word' }}>
                 {snippet}
               </Chip>
             </ListItem>
           ))}
         </List>
       </TableCell>
-      <TableCell
-        sx={{
-          textAlign: 'left',
-          verticalAlign: 'top'
-        }}
-      >
-        <List
-          marker={'disc'}
-          sx={{
-            padding: 0,
-            margin: 0,
-            listStylePosition: 'inside'
-          }}
-        >
-          {validation.criteria?.split(';').map((c, index) => (
-            <ListItem
-              key={index}
-              sx={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                padding: 0
-              }}
-            >
-              <Chip
-                sx={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.5rem',
-                  paddingLeft: '0.5rem',
-                  whiteSpace: 'normal',
-                  wordBreak: 'break-word'
-                }}
-              >
-                <Box
-                  component="span"
-                  sx={{
-                    display: 'inline-block',
-                    width: '0.5rem',
-                    height: '0.5rem',
-                    borderRadius: '50%',
-                    backgroundColor: 'currentColor',
-                    marginRight: '0.5rem'
-                  }}
-                />
-                {c
-                  .split(/(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])/)
-                  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                  .join(' ')}
+
+      <TableCell sx={{ textAlign: 'left', verticalAlign: 'top' }}>
+        <List marker="disc" sx={{ padding: 0, margin: 0, listStylePosition: 'inside' }}>
+          {validation.criteria?.split(';').map((snippet, index) => (
+            <ListItem key={index} sx={{ display: 'flex', alignItems: 'flex-start', padding: 0 }}>
+              <Chip sx={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', paddingLeft: '0.5rem', whiteSpace: 'normal', wordBreak: 'break-word' }}>
+                {snippet}
               </Chip>
             </ListItem>
           ))}
         </List>
       </TableCell>
+
       <TableCell
         sx={{
           flexGrow: 1,
           flexShrink: 0,
-          flexBasis: '35%',
+          flexBasis: '70%',
           whiteSpace: 'normal',
-          wordBreak: 'break-word'
+          wordBreak: 'break-word',
+          position: 'relative'
         }}
       >
         <Box
           sx={{
-            maxWidth: expandedValidationID === validation.validationID ? '60vw' : '100%',
+            width: '100%',
             maxHeight: expandedValidationID === validation.validationID ? '300px' : '60px',
-            overflowX: expandedValidationID === validation.validationID ? 'auto' : 'hidden',
-            overflowY: expandedValidationID === validation.validationID ? 'auto' : 'hidden',
-            transition: 'all 0.3s ease',
-            whiteSpace: expandedValidationID === validation.validationID ? 'pre-wrap' : 'nowrap',
-            position: 'relative'
+            transition: 'height 0.3s ease-in-out',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column'
           }}
         >
           {expandedValidationID === validation.validationID ? (
-            <CustomMonacoEditor
-              schemaDetails={memoizedSchemaDetails}
-              content={scriptContent}
-              setContent={debouncedSetScriptContent}
-              height={`${Math.min(300, 20 * (validation?.definition ?? '').split('\n').length)}px`}
-              isDarkMode={isDarkMode}
-              options={{
-                readOnly: !isEditing,
-                minimap: { enabled: false },
-                scrollBeyondLastLine: false,
-                wordWrap: 'off',
-                lineNumbers: 'off'
-              }}
-            />
+            <Box sx={{ width: '100%', height: '300px', flexGrow: 1 }}>
+              <CodeEditor
+                value={scriptContent ?? ''}
+                setValue={debouncedSetScriptContent}
+                schemaDetails={memoizedSchemaDetails}
+                height="300px"
+                isDarkMode={isDarkMode}
+                readOnly={!isEditing}
+              />
+            </Box>
           ) : (
             <Textarea
               minRows={1}
@@ -244,45 +151,36 @@ const ValidationRow: React.FC<ValidationRowProps> = ({
               }}
             />
           )}
-          <Box
-            sx={{
-              position: 'absolute',
-              bottom: '4px',
-              right: '4px'
-            }}
-          >
-            <IconButton onClick={() => handleExpandClick(validation.validationID!)} size="sm">
-              {expandedValidationID === validation.validationID ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </IconButton>
-          </Box>
+        </Box>
+
+        <Box sx={{ position: 'absolute', bottom: '4px', right: '4px' }}>
+          <IconButton onClick={() => handleExpandClick(validation.validationID!)} size="sm">
+            {expandedValidationID === validation.validationID ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </IconButton>
         </Box>
       </TableCell>
-      <TableCell
-        sx={{
-          alignSelf: 'center',
-          whiteSpace: 'normal',
-          wordBreak: 'break-word',
-          width: '10%'
-        }}
-      >
+
+      <TableCell sx={{ alignSelf: 'center', whiteSpace: 'normal', wordBreak: 'break-word', width: '10%' }}>
         {isEditing ? (
-          <Tooltip title={'Save Changes'}>
-            <IconButton variant="solid" onClick={handleSaveChanges}>
-              <Save />
-            </IconButton>
-          </Tooltip>
+          <>
+            <Tooltip title="Save Changes">
+              <IconButton variant="solid" onClick={handleSaveChanges}>
+                <Save />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Cancel Changes">
+              <IconButton variant="solid" onClick={handleCancelChanges}>
+                <Cancel />
+              </IconButton>
+            </Tooltip>
+          </>
         ) : (
-          <Tooltip title={'Edit Validation'}>
+          <Tooltip title="Edit Validation">
             <IconButton variant="solid" onClick={handleEditClick}>
               <Edit />
             </IconButton>
           </Tooltip>
         )}
-        <Tooltip title={'Cancel Changes'}>
-          <IconButton disabled={!isEditing} variant="solid" onClick={handleCancelChanges}>
-            <Cancel />
-          </IconButton>
-        </Tooltip>
       </TableCell>
     </TableRow>
   );
diff --git a/frontend/next.config.js b/frontend/next.config.js
index a9155a9a..6627add5 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -10,6 +10,13 @@ const nextConfig = withBundleAnalyzer({
       resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json']
     }
   },
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback = { fs: false }; // ✅ Fixes 'fs' module issue in client builds
+    }
+
+    return config;
+  },
   logging: {
     fetches: {
       fullUrl: true
@@ -19,7 +26,7 @@ const nextConfig = withBundleAnalyzer({
   reactStrictMode: true,
   distDir: 'build',
   images: {
-    unoptimized: true // since images are served from public directory
+    unoptimized: true // since images are served from the public directory
   },
   env: {
     AZURE_SQL_USER: process.env.AZURE_SQL_USER,
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1455fde9..ca3ba921 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -44,6 +44,7 @@
         "@vitejs/plugin-react-swc": "^3.7.2",
         "chalk": "^5.4.1",
         "codemirror": "^6.0.1",
+        "css-loader": "^7.1.2",
         "date-fns": "^4.1.0",
         "fast-levenshtein": "^3.0.0",
         "framer-motion": "^12.0.6",
@@ -66,6 +67,7 @@
         "react-dropzone": "^14.3.5",
         "react-markdown": "^9.0.3",
         "remark-gfm": "^4.0.0",
+        "style-loader": "^4.0.0",
         "swr": "^2.3.0",
         "tailwind-variants": "^0.3.1",
         "typescript": "^5.7.3",
@@ -77,15 +79,12 @@
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.19.0",
         "@tailwindcss/postcss": "^4.0.1",
-        "autoprefixer": "^10.4.20",
         "eslint": "^9.19.0",
         "eslint-config-next": "^15.1.6",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-prettier": "^5.2.3",
         "eslint-plugin-react": "^7.37.4",
-        "monaco-editor": "^0.52.2",
-        "monaco-editor-webpack-plugin": "^7.1.0",
         "prettier": "^3.4.2",
         "prettier-eslint": "^16.3.0",
         "tailwindcss": "^4.0.1",
@@ -1943,7 +1942,6 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4393,7 +4391,6 @@
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4405,7 +4402,6 @@
       "version": "3.7.7",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4982,7 +4978,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4994,7 +4989,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -5002,7 +4996,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -5010,7 +5003,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -5018,7 +5010,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5031,7 +5022,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -5039,7 +5029,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5053,7 +5042,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5064,7 +5052,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
-      "dev": true,
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
@@ -5075,7 +5062,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -5083,7 +5069,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5101,7 +5086,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5116,7 +5100,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5130,7 +5113,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5146,7 +5128,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5158,7 +5139,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "peer": true
     },
@@ -5166,7 +5146,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "peer": true
     },
@@ -5232,7 +5211,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5251,7 +5229,6 @@
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5269,7 +5246,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -5277,7 +5253,6 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "peerDependencies": {
@@ -5380,6 +5355,15 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
+    "node_modules/archiver-utils/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -5609,44 +5593,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -5758,16 +5704,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/binary": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
@@ -5830,7 +5766,6 @@
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
       "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5846,6 +5781,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -6123,7 +6059,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -6250,7 +6185,6 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "devOptional": true,
       "license": "MIT",
       "peer": true
     },
@@ -6376,12 +6310,59 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-loader": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
+      "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.27.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "license": "MIT"
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssstyle": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.2.1.tgz",
@@ -6744,6 +6725,15 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
+    "node_modules/duplexer2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -6754,8 +6744,8 @@
       "version": "1.5.90",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.90.tgz",
       "integrity": "sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==",
-      "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -6763,16 +6753,6 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
-    "node_modules/emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -6786,7 +6766,6 @@
       "version": "5.18.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz",
       "integrity": "sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -7038,8 +7017,8 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -7792,7 +7771,6 @@
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
       "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7969,20 +7947,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/framer-motion": {
       "version": "12.0.6",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.6.tgz",
@@ -8201,7 +8165,6 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true
     },
@@ -8558,6 +8521,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/idb": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.1.tgz",
@@ -9196,7 +9171,6 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -9339,19 +9313,6 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "license": "MIT"
     },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -9407,6 +9368,15 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -9761,28 +9731,12 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=6.11.5"
       }
     },
-    "node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -9912,6 +9866,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/log-update/node_modules/strip-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
@@ -9972,6 +9948,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/loglevel-colored-level-prefix/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/loglevel-colored-level-prefix/node_modules/chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -10405,7 +10391,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -11090,27 +11075,6 @@
       "integrity": "sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ==",
       "license": "MIT"
     },
-    "node_modules/monaco-editor": {
-      "version": "0.52.2",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
-      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/monaco-editor-webpack-plugin": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz",
-      "integrity": "sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "loader-utils": "^2.0.2"
-      },
-      "peerDependencies": {
-        "monaco-editor": ">= 0.31.0",
-        "webpack": "^4.5.0 || 5.x"
-      }
-    },
     "node_modules/motion-dom": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
@@ -11210,7 +11174,6 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -11363,8 +11326,8 @@
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -11375,16 +11338,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/npm-force-resolutions": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/npm-force-resolutions/-/npm-force-resolutions-0.0.10.tgz",
@@ -11994,6 +11947,78 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "license": "ISC",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
+      "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -12684,7 +12709,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -12970,7 +12994,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -13246,7 +13269,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -13283,7 +13305,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "peer": true,
       "dependencies": {
@@ -13900,6 +13921,22 @@
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==",
       "license": "MIT"
     },
+    "node_modules/style-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
+      "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.27.0"
+      }
+    },
     "node_modules/style-mod": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
@@ -13948,7 +13985,6 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -14045,7 +14081,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -14071,7 +14106,6 @@
       "version": "5.37.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
       "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "dependencies": {
@@ -14091,7 +14125,6 @@
       "version": "5.3.11",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.11.tgz",
       "integrity": "sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -14127,7 +14160,6 @@
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -14145,7 +14177,6 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -14155,11 +14186,17 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
       "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -14697,7 +14734,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
       "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -14713,6 +14749,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -15047,7 +15084,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
       "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -15071,7 +15107,6 @@
       "version": "5.97.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.1.tgz",
       "integrity": "sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -15176,7 +15211,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -15187,7 +15221,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "dependencies": {
@@ -15198,6 +15231,16 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8308ac12..2f56f547 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -57,6 +57,7 @@
     "@vitejs/plugin-react-swc": "^3.7.2",
     "chalk": "^5.4.1",
     "codemirror": "^6.0.1",
+    "css-loader": "^7.1.2",
     "date-fns": "^4.1.0",
     "fast-levenshtein": "^3.0.0",
     "framer-motion": "^12.0.6",
@@ -79,6 +80,7 @@
     "react-dropzone": "^14.3.5",
     "react-markdown": "^9.0.3",
     "remark-gfm": "^4.0.0",
+    "style-loader": "^4.0.0",
     "swr": "^2.3.0",
     "tailwind-variants": "^0.3.1",
     "typescript": "^5.7.3",
@@ -94,15 +96,12 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.19.0",
     "@tailwindcss/postcss": "^4.0.1",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.19.0",
     "eslint-config-next": "^15.1.6",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
-    "monaco-editor": "^0.52.2",
-    "monaco-editor-webpack-plugin": "^7.1.0",
     "prettier": "^3.4.2",
     "prettier-eslint": "^16.3.0",
     "tailwindcss": "^4.0.1",
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index c2577e35..fe69564f 100644
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@@ -1,4 +1,4 @@
 /* globals.css */
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;