diff --git a/src/App.svelte b/src/App.svelte
index f7d8d112..3e6bcd00 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,7 +7,7 @@
   import DataTableCell, { type InterpolationFunction } from "./cells/DataTableCell";
   import PlotCell from "./cells/PlotCell";
   import PiecewiseCell from "./cells/PiecewiseCell";
-  import SystemCell from "./cells/SystemCell";
+  import SystemCell from "./cells/SystemCell.svelte";
   import FluidCell from "./cells/FluidCell";
   import { cells, title, results, resultsInvalid, system_results, sub_results,
            history, insertedSheets, activeCell, getSheetJson, getSheetObject, resetSheet, sheetId,
@@ -16,7 +16,7 @@
            decrementActiveCell, deleteCell, activeMathField, autosaveNeeded, mathJaxLoaded } from "./stores";
   import { isDefaultConfig, type Config, normalizeConfig, type MathCellConfig, type Sheet, getDefaultConfig} from "./sheet/Sheet";
   import type { Statement, SubQueryStatement } from "./parser/types";
-  import type { SystemDefinition } from "./cells/SystemCell";
+  import type { SystemDefinition } from "./cells/SystemCell.svelte";
   import type { FluidFunction } from "./cells/FluidCell";
   import { isVisible, versionToDateString, debounce, saveFileBlob, sleep, createCustomUnits } from "./utility";
   import type { ModalInfo, RecentSheets, RecentSheetUrl, RecentSheetFile, StatementsAndSystems } from "./types";
diff --git a/src/Cell.svelte b/src/Cell.svelte
index 2781d82f..8c98aaaa 100644
--- a/src/Cell.svelte
+++ b/src/Cell.svelte
@@ -21,7 +21,7 @@
   import DataTableCell from "./cells/DataTableCell";
   import DocumentationCell from "./cells/DocumentationCell";
   import PiecewiseCell from "./cells/PiecewiseCell";
-  import SystemCell from "./cells/SystemCell";
+  import SystemCell from "./cells/SystemCell.svelte";
   import DeletedCell from "./cells/DeletedCell";
   import InsertCell from "./cells/InsertCell";
   import FluidCell from "./cells/FluidCell";
@@ -306,8 +306,8 @@
       />
     {:else if cell instanceof SystemCell}
       <SystemCellElement
-        on:insertMathCellAfter={insertMathCellAfter}
-        on:insertInsertCellAfter={insertInsertCellAfter}
+        {insertMathCellAfter}
+        {insertInsertCellAfter}
         bind:this={cellElement}
         index={index}
         systemCell={cell}
diff --git a/src/SystemCell.svelte b/src/SystemCell.svelte
index 6ce6f761..9bd8fa46 100644
--- a/src/SystemCell.svelte
+++ b/src/SystemCell.svelte
@@ -3,14 +3,13 @@
     cells,
     system_results,
     activeCell,
-    mathCellChanged,
-    modifierKey
+    mathCellChanged
   } from "./stores";
 
-  import { onMount, tick, createEventDispatcher } from "svelte";
+  import { onMount, tick } from "svelte";
 
-  import type SystemCell from "./cells/SystemCell";
-  import type { MathField as MathFieldClass } from "./cells/MathField";
+  import type SystemCell from "./cells/SystemCell.svelte";
+  import type { MathField as MathFieldClass } from "./cells/MathField.svelte";
 
   import MathField from "./MathField.svelte";
 
@@ -20,13 +19,26 @@
   import RowDelete from "carbon-icons-svelte/lib/RowDelete.svelte";
   import IconButton from "./IconButton.svelte";
 
-  export let index: number;
-  export let systemCell: SystemCell;
+  interface Props {
+    index: number;
+    systemCell: SystemCell;
+    insertMathCellAfter: (arg: {detail: {index: number}}) => void;
+    insertInsertCellAfter: (arg: {detail: {index: number}}) => void;
+  }
 
-  let containerDiv: HTMLDivElement;
+  let {
+    index,
+    systemCell,
+    insertMathCellAfter,
+    insertInsertCellAfter
+  }: Props = $props();
+
+  let numVars = $state(0);
+  let numSolutions = $state(0);
 
-  let numVars = 0;
-  let numSolutions = 0;
+  let numRows = $derived(systemCell.expressionFields.length);
+
+  let containerDiv: HTMLDivElement;
 
   export function getMarkdown() {
     // render system
@@ -62,11 +74,6 @@
     return result;
   }
 
-  const dispatch = createEventDispatcher<{
-    insertMathCellAfter: {index: number};
-    insertInsertCellAfter: {index: number};
-  }>();
-
   onMount(() => {
     if ($activeCell === index) {
       focus();
@@ -119,31 +126,33 @@
     }
   }
 
-  $: if ($activeCell === index) {
+  $effect( () => {
+    if ($activeCell === index) {
       focus();
     }
+  });
 
-  $: numRows = systemCell.expressionFields.length;
-
-  $: if ( $system_results[index] ) {
-    if ( $system_results[index].error ) {
-      numVars = 0;
-      numSolutions = 0;
-    } else {
-      const vars = Object.getOwnPropertyNames($system_results[index].solutions);
-      numVars = vars.length;
-      if (numVars > 0) {
-        numSolutions = $system_results[index].solutions[vars[0]].length;
-      } else {
+  $effect( () => { 
+    if ( $system_results[index] ) {
+      if ( $system_results[index].error ) {
+        numVars = 0;
         numSolutions = 0;
-        $system_results[index].error = "Error: Empty solution";
+      } else {
+        const vars = Object.getOwnPropertyNames($system_results[index].solutions);
+        numVars = vars.length;
+        if (numVars > 0) {
+          numSolutions = $system_results[index].solutions[vars[0]].length;
+        } else {
+          numSolutions = 0;
+          $system_results[index].error = "Error: Empty solution";
+        }
       }
-    }
 
-    if (systemCell.selectedSolution > numSolutions - 1) {
-      systemCell.selectedSolution = 0;
+      if (systemCell.selectedSolution > numSolutions - 1) {
+        systemCell.selectedSolution = 0;
+      }
     }
-  }
+  });
   
 </script>
 
@@ -266,8 +275,8 @@
               editable={true}
               update={(e) => parseLatex(e.latex, mathField)}
               enter={() => handleEnter(i)}
-              shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-              modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+              shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+              modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
               mathField={mathField}
               parsingError={mathField.parsingError}
               bind:this={mathField.element}
@@ -347,7 +356,7 @@
                   name={`selected_solution_${index}`}
                   bind:group={systemCell.selectedSolution}
                   value={j}
-                  on:change={handleSelectedSolutionChange}
+                  onchange={handleSelectedSolutionChange}
                 >
               </div>
               {#if j === 0}
@@ -383,8 +392,8 @@
     <MathField
       editable={true}
       update={(e) => parseLatex(e.latex, systemCell.parameterListField)}
-      shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-      modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+      shiftEnter={() => insertMathCellAfter({detail: {index: index}})}
+      modifierEnter={() => insertInsertCellAfter({detail: {index: index}})}
       mathField={systemCell.parameterListField}
       parsingError={systemCell.parameterListField.parsingError}
       bind:this={systemCell.parameterListField.element}
diff --git a/src/cells/Cells.ts b/src/cells/Cells.ts
index bd5794b9..fa65e5c5 100644
--- a/src/cells/Cells.ts
+++ b/src/cells/Cells.ts
@@ -6,7 +6,7 @@ import TableCell from "./TableCell";
 import DataTableCell from "./DataTableCell";
 import DocumentationCell from "./DocumentationCell";
 import PiecewiseCell from "./PiecewiseCell";
-import SystemCell from "./SystemCell";
+import SystemCell from "./SystemCell.svelte";
 import FluidCell from "./FluidCell";
 import type DeletedCell from "./DeletedCell";
 import type InsertCell from "./InsertCell";
diff --git a/src/cells/SystemCell.ts b/src/cells/SystemCell.svelte.ts
similarity index 94%
rename from src/cells/SystemCell.ts
rename to src/cells/SystemCell.svelte.ts
index 558db53e..aa8e5ffe 100644
--- a/src/cells/SystemCell.ts
+++ b/src/cells/SystemCell.svelte.ts
@@ -18,18 +18,17 @@ type NumericalSystemDefinition = Omit<ExactSystemDefinition, "numericalSolve"> &
 };
 
 export default class SystemCell extends BaseCell {
-  parameterListField: MathField;
-  expressionFields: MathField[];
-  selectedSolution: number;
+  parameterListField: MathField = $state();
+  expressionFields: MathField[] = $state();
+  selectedSolution: number = $state();
 
   constructor (arg?: DatabaseSystemCell) {
+    super("system", arg?.id);
     if (arg === undefined) {
-      super("system");
       this.parameterListField = new MathField('', 'id_list');
       this.expressionFields = [new MathField('', 'equality'), ];
       this.selectedSolution = 0;
     } else {
-      super("system", arg.id);
       this.parameterListField = new MathField(arg.parameterListLatex, 'id_list');
       this.expressionFields = arg.expressionLatexs.map((latex) => new MathField(latex, "equality"));
       this.selectedSolution = arg.selectedSolution;
diff --git a/src/stores.ts b/src/stores.ts
index 61867422..7185c53a 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -9,7 +9,7 @@ import TableCell from './cells/TableCell';
 import DataTableCell from './cells/DataTableCell';
 import type {MathField} from './cells/MathField.svelte';
 import PiecewiseCell from './cells/PiecewiseCell';
-import SystemCell from './cells/SystemCell';
+import SystemCell from './cells/SystemCell.svelte';
 import FluidCell from './cells/FluidCell';
 import PlotCell from './cells/PlotCell';
 import DeletedCellClass from "./cells/DeletedCell";
diff --git a/src/types.ts b/src/types.ts
index d789dd46..9e3a8ac2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
 import type MathCell from "./cells/MathCell.svelte";
-import type { SystemDefinition } from "./cells/SystemCell";
+import type { SystemDefinition } from "./cells/SystemCell.svelte";
 import type { FluidFunction } from "./cells/FluidCell";
 import type { Statement, SubQueryStatement } from "./parser/types";
 import type { MathField } from "./cells/MathField.svelte";