diff --git a/src/truth-table.tsx b/src/truth-table.tsx
index 7867468..146ea4d 100644
--- a/src/truth-table.tsx
+++ b/src/truth-table.tsx
@@ -6,7 +6,7 @@ import TruthTable from "./components/truth-table";
 import { InfoBox, MyDisclosure, MyDisclosureContainer } from "./components/output";
 import { diffChars } from "diff";
 import MyMenu from "./components/menu";
-import type { FetchResult } from "./types/types";
+import type { FetchResult, OrderOfOperation } from "./types/types";
 import { type Accessor, type Component, createSignal, JSX, onMount, Show } from "solid-js";
 import { For, render } from "solid-js/web";
 import Row from "./components/row";
@@ -94,11 +94,12 @@ const TruthTablePage: Component = () => {
         let exp = getInputElement()?.value;
 
         if (exp) {
-            exp = replaceOperators(exp);
 
             history.pushState(null, "", `?exp=${ encodeURIComponent(exp) }&simplify=${ simplifyEnabled() }&
 hide=${ hideValues().value }&sort=${ sortValues().value }&hideIntermediate=${ hideIntermediates() }`);
 
+            exp = replaceOperators(exp);
+
             getFetchResult(exp);
         }
     }
@@ -351,31 +352,8 @@ const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
             <table class={ "table" }>
                 <tbody>
 
-                    <For each={ fetchResult()?.orderOperations }>{
-                        (operation, index) => (
-                            <tr class={ "border-b border-dotted border-gray-500" }>
-                                <td>{ index() + 1 }:</td>
-                                <td class={ "px-2" }>{
-
-                                    <For each={ diffChars(operation.before, operation.after) }>
-                                        { (part) => (
-                                            <span class={
-                                                `${ part.added && "bg-green-700" }
-                                                                    ${ part.removed && "bg-red-700" }` }>
-                                                                { part.value }
-                                                            </span>) }
-                                    </For> }
-
-                                    <Show when={ typeof window !== "undefined" && window.outerWidth <= 640 } keyed>
-                                        <p>{ "using" }: { operation.law }</p>
-                                    </Show>
-
-                                </td>
-                                <Show when={ typeof window !== "undefined" && window.outerWidth > 640 } keyed>
-                                    <td>{ "using" }: { operation.law }</td>
-                                </Show>
-                            </tr>
-                        ) }
+                    <For each={ fetchResult()?.orderOperations }>
+                        { orderOperationRow() }
                     </For>
 
                 </tbody>
@@ -386,6 +364,7 @@ const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
 
 const HowTo: Component = () => (
     <MyDisclosureContainer>
+
         <MyDisclosure title={ "How to" }>
             <p>Fill in a truth expression and it will be simplified for you as much as possible.
                It will also genereate a truth table with all possible values. You can use a single
@@ -402,6 +381,30 @@ const HowTo: Component = () => (
     </MyDisclosureContainer>
 );
 
+const orderOperationRow = () => (operation: OrderOfOperation, index: Accessor<number>) => (
+    <tr class={ "border-b border-dotted border-gray-500" }>
+        <td>{ index() + 1 }:</td>
+        <td class={ "px-2" }>{
+
+            <For each={ diffChars(operation.before, operation.after) }>
+                { (part) => (
+                    <span class={ `${ part.added && "bg-green-700" } ${ part.removed && "bg-red-700" }` }>
+                            { part.value }
+                        </span>
+                ) }
+            </For> }
+
+            <Show when={ typeof window !== "undefined" && window.outerWidth <= 640 } keyed>
+                <p>{ "using" }: { operation.law }</p>
+            </Show>
+
+        </td>
+        <Show when={ typeof window !== "undefined" && window.outerWidth > 640 } keyed>
+            <td>{ "using" }: { operation.law }</td>
+        </Show>
+    </tr>
+);
+
 const KeywordsDisclosure: Component = () => (
     <MyDisclosure title={ "Keywords" }>
         <table>
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index d3c2d63..b96e6e7 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -51,18 +51,18 @@ type Operator = "AND" | "OR" | "NOT" | "IMPLICATION";
 
 type Table = boolean[][];
 
-type OrderOfOperations = {
+type OrderOfOperation = {
     before: string,
     after: string,
     law: string,
-}[];
+};
 
 type FetchResult = {
     status: string,
     version: string | null,
     before: string,
     after: string,
-    orderOperations: OrderOfOperations | null,
+    orderOperations: OrderOfOperation[] | null,
     expression: Expression | null,
     header: string[] | null,
     table: {